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
Eliminar el espacio en blanco debajo de la imagenAplicando estilos CSS solo a ciertos elementosEn IE CSS font-face funciona solo cuando se navega a través de enlaces internosdesactivar la vista de zoom de iOS 10+ safari?Fuerza la actualización de los datos CSS almacenados en caché¿Cómo puedo eliminar el contorno de las imágenes de hipervínculos?Impresión CSS: ¿Evita las DIV cortadas por la mitad entre páginas?¿Cómo puedo ocultar automáticamente el texto del marcador de posición al enfocar usando css o jquery?