Seta / triângulo transparente recuado
Eu gostaria de fazer umaseta transparente sobre uma imagem. Este triângulo deve ser recuado em um bloco semi-transparente e mostrar a imagem de fundo.
Saída desejada:
.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>
oSeta CSS transparente deve ser transparente sem cor.