Guida Creare forme con i bordi CSS

[SyncroIT]

Come creare forme di vario tipo con i bordi CSS​

Fase 1: Comprendere l'efficacia dei bordi CSS
I bordi CSS si dividono in border-top, border-bottom, border-left, border-right, ognuno di questi bordi parte dal centro e si espande sia di lunghezza che di larghezza verso l'esterno. Possiamo renderci conto di ciò che è possibile realizzare sfruttando i bordi, guardando questa semplice struttura realizzata in CSS.

Il codice utilizzato lo troviamo nello spoiler:

Spoiler

#bordertest {
    width: 0;
    border-top: 150px solid red;  
    border-bottom: 150px solid yellow;
    border-left: 150px solid green;
    border-right: 150px solid blue;
    margin: auto;
}

In rosso abbiamo la proprietà border-top, in verde abbiamo border-left, in giallo abbiamo border-bottom e in blu abbiamo border-right. C'è da precisare che i bordi non vanno mai tolti a meno che noi non vogliamo realizzare qualcosa che preveda la rimozione di uno o più bordi, questo per il semplice fatto che se togliamo border-left, verrà tolta anche una parte di border-top e border-bottom, e avremo di conseguenza la metà del quadrato che vediamo sopra. Per rimediare al problema, è possibile usare il colore transparent.

Fase 2: Vari esempi di strutture

Triangolo

Codice

Spoiler

#bordertest {
    width: 0;
    border-top: 150px solid red;  
    border-bottom: 150px solid transparent;
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    margin: auto;
}

Triangolo rettangolo

Spoiler

#bordertest {
    width: 0;
    border-top: 150px solid red;  
    border-bottom: 150px solid transparent;
    border-right: 150px solid transparent;
    margin: auto;
}

Fase 3: Unire e dare sfogo alla fantasia
E' infine possibile unire le strutture create e dare sfogo alla fantasia creando rombi, pentagoni, e molte altre forme geometriche. E' inoltre possibile, attraverso i posizionamenti relativi e assoluti, e attraverso al line-height e al font-size, posizionare un testo e centrarlo all'interno della propria struttura creata con i CSS e HTML.

In caso di dubbi scrivete pure, e in caso sia in grado di aiutarvi vi risponderò.
Buona navigazione!