Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Forme geometriche: come costruire con i CSS

Alcuni esempi che mostrano come utilizzare CSS3 per realizzare forme geometriche di vario tipo, da includere all'interno di una pagina web.
Alcuni esempi che mostrano come utilizzare CSS3 per realizzare forme geometriche di vario tipo, da includere all'interno di una pagina web.
Link copiato negli appunti

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.

Ti consigliamo anche