Forme geometriche: come costruire con i CSS

Le specifiche HTML, CSS e Javascript racchiudono potenzialità enormi, ma non sempre vengono messe in pratica. Grazie alla potenza di CSS 3, ad esempio, è possibile realizzare animazioni ed effetti che prima non erano minimamente concepibili. Mescolando alcune tra le proprietà CSS più note, come width, height, border, margin e position, insieme a quelle più complesse e "nuove" come border-radius, box-shadow, transform e content, nonché sfruttando i nuovi pseudo selettori ::after e ::before, è possibile realizzare delle vere e proprie forme geometriche utilizzando unicamente elementi HTML e selettori CSS.

In questo articolo postato su CSS Tricks possiamo ammirare come è possibile realizzare praticamente tutte le figure che possiamo immaginare: rettangoli, cerchi, ovali, triangoli, trapezi, parallogrammi, stelle, pentagrammi, parallepidi sono solo alcuni dei possibili risultati.

Consideriamo un semplice codice HTML, in cui ad un div viene assegnato un id,:

<div id="nomeforma"></div>

Possiamo animare le sembianze di questo elemento, aggiungendo un po' di CSS opportuno.
Vediamo qualche esempio.

Rettangolo

#rectangle {
      width: 200px;
      height: 100px;
      background: red;
    }

Cerchio

#circle {
      width: 100px;
      height: 100px;
      background: red;
      border-radius: 50%
    }

Triangolo con punta verso l'alto

#triangle-up {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid red;
    }

Triangolo con punta verso destra

#triangle-right {
      width: 0;
      height: 0;
      border-top: 50px solid transparent;
      border-left: 100px solid red;
      border-bottom: 50px solid transparent;
    }

Freccia curvata rivolta verso il basso

#curvedarrow {
      position: relative;
      width: 0;
      height: 0;
      border-top: 9px solid transparent;
      border-right: 9px solid red;
      transform: rotate(10deg);
    }
    #curvedarrow:after {
      content: "";
      position: absolute;
      border: 0 solid transparent;
      border-top: 3px solid red;
      border-radius: 20px 0 0 0;
      top: -12px;
      left: -9px;
      width: 12px;
      height: 12px;
      transform: rotate(45deg);
    }

Stella a sei punte

#star-six {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid red;
      position: relative;
    }
    #star-six:after {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-top: 100px solid red;
      position: absolute;
      content: "";
      top: 30px;
      left: -50px;
    }

Stella a cinque punte

#star-five {
      margin: 50px 0;
      position: relative;
      display: block;
      color: red;
      width: 0px;
      height: 0px;
      border-right: 100px solid transparent;
      border-bottom: 70px solid red;
      border-left: 100px solid transparent;
      transform: rotate(35deg);
    }
    #star-five:before {
      border-bottom: 80px solid red;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -45px;
      left: -65px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }
    #star-five:after {
      position: absolute;
      display: block;
      color: red;
      top: 3px;
      left: -105px;
      width: 0px;
      height: 0px;
      border-right: 100px solid transparent;
      border-bottom: 70px solid red;
      border-left: 100px solid transparent;
      transform: rotate(-70deg);
      content: '';
    }

Ottagono

#octagon {
      width: 100px;
      height: 100px;
      background: red;
      position: relative;
    }
    #octagon:before {
      content: "";
      width: 100px;
      height: 0;
      position: absolute;
      top: 0;
      left: 0;
      border-bottom: 29px solid red;
      border-left: 29px solid #eee;
      border-right: 29px solid #eee;
    }
    #octagon:after {
      content: "";
      width: 100px;
      height: 0;
      position: absolute;
      bottom: 0;
      left: 0;
      border-top: 29px solid red;
      border-left: 29px solid #eee;
      border-right: 29px solid #eee;
    }

Questi esempi sono ovviamente un campione limitato, ma dimostrano la capacità di generare forme geometriche tramite il solo uso di CSS3.