Frecce con i CSS

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!