Creare un tab con i bordi di :after e :before

In questo esempio abbiamo voluto provare ad utilizzare gli pseudo-elementi :after e :before per creare, giocando con i loro bordi, un effetto grafico senza l'uso di immagini né l'aggiunta di ulteriori elementi nella pagina.

DEMO

Nella demo sono presenti i codici CSS utilizzati per ottenere l'effetto "linguetta" (tab) su ciascuno dei quattro lati di un box contenitore.

Nella seguente immagine è rappresentato il posizionamento dei bordi degli pseudo-elementi del box con linguetta superiore:

In Rete esistono diversi esempi che usano questa tecnica: sicuramente vi sarete imbattuti nelle frecce di alcuni tooltip. Qui un utile sito per generarli: cssarrowplease.com

Per comprendere meglio come si possa ottenere una linea obliqua usando i bordi (senza l'uso dei CSS3), vi consigliamo di consultare questo articolo in lingua francese: ultra-fluide.com



Per approfondire:

• CSS: :before and :after pseudo elements in practice - Krasimir Tsonev