disign.it | Frecce con i CSS | a digital sign for a best design!
A digital sign for a best design
Css tips and tricks 5.790 visualizzazioni

Frecce con i CSS

10/08/2011

Un'applicazione diciamo 'bizzarra', curiosa dei CSS! Giusto per esplorare le cose che si possonn fare con questo meraviglioso mai esplorato abbastanza strumento, in questo esempio utilizziamo dei div a dimensione larghezza e altezza 0 e attraverso l'incrocio di tre bordi per ogni div, uno colorato gli altri trasparenti otteniamo una sezione a triangolo!


Questo è il CSS
freccia-su {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #F00;
}

.freccia-giu {
        width: 0;
        height: 0;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 20px solid #0F0;
}

.freccia-destra {
        width: 0;
        height: 0;
        border-top: 60px solid transparent;
        border-bottom: 60px solid transparent;
        border-left: 60px solid #00F;
}

.freccia-sinistra {
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid #000;
}

Qui potete vedere l'esempio!

CSS
← Diagnostica con i css Footer fisso →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.