透明な矢印を作成する

Question

以下のスクリプトに示すように、透明な矢印を作成する必要があります。

.container{ 
 
    height:250px; 
 
    background-image:url('https://pixabay.com/static/uploads/photo/2016/01/11/22/05/background-1134468_960_720.jpg'); 
 
    position:relative; 
 
    overflow:hidden; 
 
} 
 
.container:after{ 
 
    content:''; 
 
    clear:both; 
 
    display:block; 
 
} 
 
.left, 
 
.right{ 
 
    width:50%; 
 
    float:left; 
 
    height:100%; 
 
} 
 
.right{ 
 
    background-color:#555; 
 
} 
 
.arrow1{ 
 
    width: 0; 
 
    height: 0; 
 
    border: 125px solid transparent; 
 
    border-right: 50px solid #555; 
 
    position: absolute; 
 
    right: 50%; 
 
    top: 50%; 
 
} 
 
.arrow2{ 
 
    width: 0; 
 
    height: 0; 
 
    border: 125px solid transparent; 
 
    border-right: 50px solid #555; 
 
    position: absolute; 
 
    right: 50%; 
 
    top: -50%; 
 
}

<div class="container"> 
 
    <div class="left"></div> 
 
    <div class="arrow1"></div> 
 
    <div class="arrow2"></div> 
 
    <div class="right"></div> 
 
</div>

私は一種の私が欲しいものだが、問題は、私はテスト目的のために、ここで250pxに設定されている<div class="container">の高さを知らないということです。 .arrow1の境界は、常に.containerの半分でなければなりません。しかし、ここでパーセント値を使うことができないので、私はどのようにして逃げるのか分かりません。 私は最良の方法は、形状とsvgを持っていると思うが、私はベクトルプログラムと私が見つけたオンラインソリューションが適切に動作しませんがありません。誰にも代替方法がありますか？

Answer 1

私は、どのクラスも不透明ではないことに気付きました。一般的に、私はCSSで作業していて何らかの形で透明にする必要があるときは、不透明度を使用しています。

http://www.w3schools.com/css/css_image_transparency.asp

.right{ 
    background-color:#555; 
    opacity: .5; 
} 
.arrow1{ 
    opacity: .5; 
    width: 0; 
    height: 0; 
    border: 125px solid transparent; 
    border-right: 50px solid #555; 
    position: absolute; 
    right: 50%; 
    top: 50%; 
} 
.arrow2{ 
    opacity: .5; 
    width: 0; 
    height: 0; 
    border: 125px solid transparent; 
    border-right: 50px solid #555; 
    position: absolute; 
    right: 50%; 
    top: -50%; 
} 

私は、このcodepenに物事を見てなかった役立つはずです。

http://codepen.io/KDweber89/pen/RRObbm?editors=1100#0