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
¿Por qué se empuja hacia abajo este elemento de bloque en línea?¿Cuál es la diferencia entre: first-child y: first-of-type?Flushing pie de página al pie de la página, twitter bootstrapBootstrap 3 Deslice en Menú / Navbar en el móvil¿Qué significa @media screen y (max-width: 1024px) en CSS?¿Hay alguna manera de eliminar el borde negro de IEs alrededor del botón de enviar en formularios activos?CSS3 – ¿Cómo estilo el texto seleccionado en textareas y entradas en Chrome?Crear una lista de selectores con MENOS