Freccia trasparente / triangolo rientrato

Mi piacerebbe creare una freccia trasparente su un’immagine . Questo triangolo dovrebbe essere rientrato in un blocco semitrasparente e mostrare l’immagine di sfondo.

Output desiderato:

triangolo CSS indentato trasparente

.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 freccia CSS trasparente dovrebbe essere trasparente senza colors.

Esistono diversi approcci per creare una freccia trasparente su un’immagine con i CSS . I due che descriverò comprendono pseudo elementi per minimizzare il markup e avere lo stesso risultato. Puoi anche vedere un approccio SVG alla fine di questa risposta:

Freccia trasparente su un'immagine

L’effetto trasparente sulla parte nera attorno alla freccia è fatto con colors rgba() che consentono la trasparenza. Ma puoi usare l’opacità sugli elementi pseudo se preferisci.


1. SkewX ()

È ansible utilizzare la proprietà skewX() CSS3 su due pseudo elementi per rendere la freccia trasparente. Il vantaggio principale di questo approccio è che la freccia trasparente può essere retriggers ma consente anche di mettere un bordo sulla forma nera e attorno al traingle.

La reattività della forma è realizzata con la proprietà padding-bottom per mantenerne le proporzioni (questa tecnica è descritta qui ).

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

Approccio semplice

  • Usa lo pseudo elemento con box-shadow e transform: rotate();

  • Aggiungi overflow: hidden; al div principale

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

Ecco una soluzione che utilizza CSS clip-path che non strabocca il 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%); }