Seta / triângulo transparente recuado

Eu gostaria de fazer uma seta transparente sobre uma imagem . Este triângulo deve ser recuado em um bloco semitransparente e mostrar a imagem de fundo.

Saída desejada:

triângulo CSS recuado transparente

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

A Seta CSS transparente deve ser transparente sem cor.

Existem várias abordagens para criar uma seta transparente sobre uma imagem com CSS . Os dois que descreverei envolvem pseudo-elementos para minimizar a marcação e ter a mesma saída. Você também pode ver uma abordagem SVG no final desta resposta:

Seta transparente sobre uma imagem

O efeito transparente na parte preta ao rgba() da seta é feito com rgba() colors que permitem transparência. Mas você pode usar a opacidade nos pseudo-elementos, se preferir.


1. SkewX ()

Você pode usar a propriedade skewX() do CSS3 em dois pseudo-elementos para criar a seta transparente. O principal recurso dessa abordagem é que a seta transparente pode ser responsiva, mas também permite que você coloque uma borda na forma preta e ao redor do traingle.

A capacidade de resposta da forma é feita com a propriedade padding-bottom para manter sua proporção (esta técnica é descrita aqui ).

DEMO

 .wrap { position: relative; overflow: hidden; width: 70%; margin: 0 auto; } .wrap img { width: 100%; height: auto; display: block; } .arrow { position: absolute; bottom: 0; width: 100%; padding-bottom: 3%; background-color: rgba(0, 0, 0, 0.8); } .arrow:before, .arrow:after { content: ''; position: absolute; bottom: 100%; width: 50%; padding-bottom: inherit; background-color: inherit; } .arrow:before { right: 50%; -ms-transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -ms-transform: skewX(45deg); -webkit-transform: skewX(45deg); transform: skewX(45deg); } .arrow:after { left: 50%; -ms-transform-origin: 0 100%; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -ms-transform: skewX(-45deg); -webkit-transform: skewX(-45deg); transform: skewX(-45deg); } 
 

Abordagem Simples

  • Use pseudo-elemento com box-shadow e transform: rotate();

  • Adicionar overflow: hidden; para div principal.

Snippet:

 body { margin: 0; padding: 0; background: url(http://i.imgur.com/EinPKO3.jpg); background-size: cover; } div { height: 100px; width: 100%; position: absolute; bottom: 0; overflow: hidden; } div:before { position: absolute; top: -50px; left: calc(50% - 35px); content: ""; height: 50px; width: 50px; background: transparent; -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); box-shadow: 0 0 0 5000px rgba(0, 0, 0, 0.6); } 
 

Aqui está uma solução usando o caminho de clipe CSS que não transborda o wrapper.

 .wrap { position:relative; width:480px; height:270px; background-image:url(http://placehold.it/480x270); } .wrap:after { content:""; display:block; position:absolute; left:0; right:0; bottom:0; height:50px; background-color:rgba(0, 0, 0, 0.7); -webkit-clip-path:polygon(0 0, calc(50% - 30px) 0, 50% 50%, calc(50% + 30px) 0, 100% 0, 100% 100%, 0 100%); -moz-clip-path:polygon(0 0, calc(50% - 30px) 0, 50% 50%, calc(50% + 30px) 0, 100% 0, 100% 100%, 0 100%); clip-path:polygon(0 0, calc(50% - 30px) 0, 50% 50%, calc(50% + 30px) 0, 100% 0, 100% 100%, 0 100%); }