Bordo con una freccia centrata trasparente

Sto provando a disegnare un div con un bordo inferiore che abbia una freccia rivolta verso il basso . Il div avrà un’immagine al suo interno e non dovrebbe avere un bordo superiore, destro o sinistro. Il riempimento della freccia rivolta verso il basso dovrebbe essere uguale al div o trasparente.

Sono stato in grado di farlo funzionare per la maggior parte utilizzando il codice qui sotto:

.hero { position: relative; background-color: yellow; height: 320px !important; width: 100% !important; border-bottom: 1px solid red; } .hero:after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -50px; width: 0; height: 0; border-top: solid 50px #e15915; border-left: solid 50px transparent; border-right: solid 50px transparent; } 
 

Guarda questo violino: http://jsfiddle.net/alisamii/tjep3h8t/

Qualunque cosa provi a fare per “svuotare” la freccia o si traduce in un div senza bordi (quindi ha un riempimento di giallo ma nessun bordo su qualsiasi lato) o in un bordo che gira intorno all’intero div.

Qualsiasi aiuto?

Ci sono due metodi per ottenere questo usando CSS3. Uno usa skewX su pseudo-elementi mentre l’altro usa rotate su pseudo-elementi. Entrambi i metodi sono anche reattivi .

Usare l’inclinazione:

Questo metodo è adattato dalla risposta di web-tiki in questa discussione. Fondamentalmente utilizza due pseudo-elementi (con una larghezza del 50% circa del contenitore) che sono inclinati in direzioni opposte e posizionati in modo appropriato per arrivare alla forma della freccia. Le forms hanno bordi dove lo background è impostato su trasparente, il che significa che gli pseudo-elementi producono un effetto di bordo inferiore + freccia in basso. Il riempimento a freccia sarà sempre trasparente (o colore del corpo) in questo esempio.

 body { background: rgb(245, 242, 242); } .bordered { position: relative; height: 200px; width: 200px; margin: 10px; line-height: 200px; } .bordered:after, .bordered:before { position: absolute; content: ' '; height: 8px; width: 50%; bottom: 0px; } .bordered:before { left: 0px; border-top: 1px solid gray; border-right: 1px solid gray; transform-origin: left bottom; transform: skewX(45deg); } .bordered:after { right: 0px; border-top: 1px solid gray; border-left: 1px solid gray; transform-origin: right bottom; transform: skewX(-45deg); } .bordered img { width: 150px; padding: 25px; vertical-align: middle; } /* Just for demo */ .bordered { transition: all 1s; text-align: center; } .bordered:hover { height: 250px; width: 250px; line-height: 250px; } 
   

Una soluzione semplice in cui lo sfondo della freccia sarà trasparente, consentendoti di utilizzarlo su sfondi che cambiano:

HTML:

 

CSS:

 .side-line { display: inline-block; border-top: 1px solid black; width: 20%; } .triangle { display: inline-block; height: 7px; width: 7px; transform: rotate(45deg); transform-origin: center center; border-top: 1px solid black; border-left: 1px solid black; margin-left: -3px; margin-right: -3px; margin-bottom: -3px; } 

Demo dal vivo: http://jsfiddle.net/85saaphw/

Non sono sicuro se questa sia la soluzione migliore, ma una delle opzioni potrebbe essere quella di usare a :before eseguire il rendering del triangolo arancione e a :after rendering di un triangolo leggermente più piccolo con il colore dello sfondo. Il :after triangle copre principalmente il :before triangle lasciando solo un piccolo bordo triangular arancione. Sfortunatamente non può essere trasparente se lo risolvi in ​​questo modo.

 .hero { position: relative; background-color: yellow; height: 320px !important; width: 100% !important; border-bottom: 1px solid red; } .hero:before { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -50px; width: 0; height: 0; border-top: solid 50px #e15915; border-left: solid 50px transparent; border-right: solid 50px transparent; } .hero:after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -48px; width: 0; height: 0; border-top: solid 48px yellow; border-left: solid 48px transparent; border-right: solid 48px transparent; }