Transparenter Pfeil / Dreieck eingerückt
Ich würde gerne eine machentransparenter Pfeil über einem Bild. Dieses Dreieck sollte in einem halbtransparenten Block eingerückt sein und das Hintergrundbild anzeigen.
Gewünschte Ausgabe:
.barShow {
background-color: #000;
opacity: 0.5;
}
.barShow:before {
top: 0%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: #999;
border-width: 20px;
margin-left: -20px;
}
<div class="barShow"></div>
Dastransparenter CSS-Pfeil sollte transparent ohne Farbe sein.