透明的CSS箭头

Question

我整天都在玩这个游戏。我希望效果像这样的链接：

http://demo.bloooming.com/rebloom/

您将在导航栏中看到有一个透明的css箭头，您可以通过它看到背景图像。

我已经尝试过并试图让它发挥作用，现在我已经陷入了困境（对于周五晚上来说不是很好 - 这种感觉通常是在周六早上保留的）。我搜索并搜索了互联网，发现了各种提示，但似乎无法重新创建它！

以下是Fiddle

body {
background: url(http://www.conti.co.uk/images/jpg/box-2.jpg);
background-size: cover;
}

.wrap {
width: 500px;
height: 200px;
display: block;
position: relative;
background: #c00;
}

.vc-arrow-left {
width: 20px;
height: 200px;
right: 0;
background: none;
position: absolute;
display: block;
}

.vc-arrow-left:before,
.vc-arrow-left:after {
content: '';
position: absolute;
box-sizing: border-box;
/*background: #000;*/
top: 50%;
right: 0;
margin-top: -10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid green;
}

我把箭头留下了绿色以显示我的想法 - 显然这只是一个会议页面 - 而不是真正的成品!!

由于