Erstellen Sie einen transparenten Pfeil

Question

Ich muss einen transparenten Pfeil erstellen, wie im folgenden Skript gezeigt.

.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>

Ich habe Art, was ich will, aber das Problem ist, dass ich die Höhe von <div class="container"> weiß nicht, was auf 250px hier zu Testzwecken eingestellt ist. die Grenze der .arrow1 muss immer die halbe Höhe von .container sein. Da ich hier aber keine Prozentwerte verwenden kann, weiß ich nicht, wie ich es verstehen soll. Ich denke, der beste Weg wäre, eine Svg mit der Form zu haben, aber ich habe keine Vektorprogramme und die Online-Lösungen, die ich gefunden habe, werden nicht richtig funktionieren. Hat jemand einen alternativen Weg?

Answer 1

Ich habe festgestellt, dass keine der Klassen Deckkraft haben. Im Allgemeinen, wenn ich mit CSS arbeite und etwas brauche, um irgendwie transparent zu sein, verwende ich Opazität und es funktioniert ganz gut.

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%; 
} 

ich einen Blick auf die Dinge auf dieser codepen nehmen tat sollten, helfen.

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