Flecha transparente / triángulo sangrado

Me gustaría hacer una flecha transparente sobre una imagen . Este triángulo debe sangrarse en un bloque semitransparente y mostrar la imagen de fondo.

Salida deseada:

triángulo CSS transparente con sangría

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

La flecha CSS transparente debe ser transparente sin color.

Hay varios enfoques para hacer una flecha transparente sobre una imagen con CSS . Los dos que describiré incluyen pseudo elementos para minimizar el marcado y tener el mismo resultado. También puede ver un enfoque SVG al final de esta respuesta:

Flecha transparente sobre una imagen

El efecto transparente en la parte negra rgba() la flecha está hecho con colores rgba() que permiten la transparencia. Pero puede usar opacidad en los pseudo elementos si lo prefiere.


1. SkewX ()

Puede usar la skewX() CSS3 skewX() en dos pseudo elementos para hacer la flecha transparente. El principal activo de este enfoque es que la flecha transparente puede ser receptiva pero también le permite poner un borde en la forma negra y alrededor del círculo.

La capacidad de respuesta de la forma se realiza con la propiedad del padding-bottom para mantener su relación de aspecto (esta técnica se describe aquí ).

MANIFESTACIÓN

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

Enfoque simple

  • Use pseudo elemento con box-shadow y transform: rotate();

  • Agregar overflow: hidden; a la div principal

Fragmento:

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

Aquí hay una solución que usa CSS clip-path que no desborda el 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%); }