.: HosiriS :.

Informatica e non solo

Disegnare attraverso i CSS

Posted by hosiris su marzo 8, 2011

Di seguito presento una breve lista delle forme realizzabili attraverso i CSS.

QUADRATO

#square {
width: 100px;
height: 100px;
background: #ccc;
}

RETTANGOLO

#square {
width: 200px;
height: 100px;
background: #ccc;
}

CERCHIO

#circle {
width: 100px;
height: 100px;
background: #ccc;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

ELLISSE

#oval {
width: 200px;
height: 100px;
background: #ccc;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}

TRIANGOLO VERTICE ALTO

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

TRIANGOLO VERTICE BASSO

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

TRIANGOLO VERTICE SINISTRA

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

TRIANGOLO VERTICE DESTRA

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

TRIANGOLO TOP-LEFT

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

TRIANGOLO TOP-RIGHT

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

TRIANGOLO BOTTOM-LEFT

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

TRIANGOLO BOTTOM-RIGHT

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

PARALLELOGRAMMA

#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: #ccc;
}

TRAPEZIO

#trapezoid {
border-bottom: 100px solid #ccc;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0; width: 100px;
}

INFINITO

#infinity {
position: relative;
width: 212px;
height: 100px;
}
#infinity:before, #infinity:after {
content: "";
position: absolute;
top: 0; left: 0;
width: 60px;
height: 60px;
border: 20px solid red;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:after {
left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

 
%d blogger cliccano Mi Piace per questo: