DOKRY Desarrollo
  1. DOKRY Desarrollo
  3. Flecha transparente / triángulo sangrado

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%); }
Intereting Posts
¿Cómo puedo diseñar el componente ProgressBar en JavaFX?¿Cómo se supone que funciona un CSS “display: table-column”?Usar variables en nombres de propiedad en LESS (propiedades dinámicas / interpolación de nombre de propiedad)¿Hay alguna manera de eliminar el borde negro de IEs alrededor del botón de enviar en formularios activos?CSS Parent / Ancestor SelectorCírculo transparente hueco o recortadoSoporte de navegador para CSS GridCentre una columna usando Twitter Bootstrap