CSS3 Shapes: realizzare figure geometriche solo con i CSS3

Grazie al modulo dei CSS3 Shapes, è possibile includere nei progetti web molte tra le più comuni forme geometriche che potrebbero rendere più ricche e simpatiche le nostre pagine. Con il solo ausilio dei CSS, possiamo ottenerne diverse, dalle più semplici alle più complesse.

L'articolo in oggetto non conterrà molto testo, lasciando spazio al codice CSS ed alla geometria.

Quadrato

.quadrato
{
width:       100px; 
height:	     100px; 
}

Rettangolo

.rettangolo
{
width:       140px; 
height:      80px;
}

Cerchio

.cerchio
{ 
width:                100px;
height:               100px;
-moz-border-radius:   50px; 
-webkit-border-radius:50px; 
border-radius:        50px;
}

Ovale

.ovale
{
width:                  200px; 
height:                 100px; 
-moz-border-radius:     100px / 50px; 
-webkit-border-radius:  100px / 50px; 
border-radius:          100px / 50px;
}

Triangolo Isoscele

.triangolo-isoscele
{
width: 	        0;
height:         0;
border-left: 	50px solid transparent;
border-right: 	50px solid transparent;
border-bottom: 	100px solid red;
}

Triangolo Equilatero

.triangolo-equilatero
{
width: 		0;
height: 	0;
border-left: 	100px solid transparent;
border-right: 	100px solid transparent;
border-bottom: 	100px solid red;
}

Triangolo Isoscele Inverso

.triangolo-isoscele-inverso
{
width: 		0;
height: 	0;
border-top:	100px solid red;
border-left: 	50px solid transparent;
border-right: 	50px solid transparent;
}

Triangolo Isoscele Sinistro

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

Triangolo Isoscele Destro

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

Parallelogramma Sinistro

.parallelogramma-left
{
width:              100px; 
height:             100px; 
background:	        red;
transform:          skew(20deg); 
-o-transform:       skew(20deg); 
-moz-transform:     skew(20deg); 
-webkit-transform:  skew(20deg);
}

Parallelogramma Destro

.parallelogramma-right 
{ 
width: 100px; 
height: 100px; 
transform: skew(-20deg); 
-o-transform: skew(-20deg); 
-moz-transform: skew(-20deg); 
-webkit-transform: skew(-20deg); 
}

Rombo

.rombo 
{
width:                        100px; 
height:                       100px; 
-webkit-transform:            rotate(-45deg);
-moz-transform:               rotate(-45deg);
-ms-transform:                rotate(-45deg);
-o-transform:                 rotate(-45deg);
transform:                    rotate(-45deg);
-webkit-transform-origin:     0 100%;
-moz-transform-origin:        0 100%;
-ms-transform-origin:         0 100%;
-o-transform-origin:          0 100%;
transform-origin:             0 100%; 
}

Trapezio Isoscele

.trapezio1 
{
height:              0; 
width:               100px;
border-bottom:       80px solid red;
border-left:         40px solid transparent;
border-right:        40px solid transparent;
}

Trapezio Isoscele Inverso

.trapezio2
{
width:               100px; 
height:              0; 
border-top:          80px solid red;
border-left:         40px solid transparent;
border-right:        40px solid transparent;
}

Semicerchio Orizzontale Top

.semicerchio-orizzontale-top
{
height:                45px;
width:                 90px;
border-radius:         90px 90px 0 0;
-moz-border-radius:    90px 90px 0 0;
-webkit-border-radius: 90px 90px 0 0;
}

Semicerchio Orizzontale Right

.semicerchio-orizzontale-right 
{
height:                90px;
width:                 45px;
border-radius:         0 90px 90px 0;
-moz-border-radius:    0 90px 90px 0;
-webkit-border-radius: 0 90px 90px 0;
}

Semicerchio Orizzontale Left

.semicerchio-orizzontale-left 
{
height:                90px;
width:                 45px;
border-radius:         90px 0 0 90px;
-moz-border-radius:    90px 0 0 90px;
-webkit-border-radius: 90px 0 0 90px;
} 

Semicerchio Orizzontale Bottom

.semicerchio-orizzontale-bottom 
{
height:                45px;
width:                 90px;
border-radius:         0 0 90px 90px;
-moz-border-radius:    0 0 90px 90px;
-webkit-border-radius: 0 0 90px 90px;
}

Arco Top Left

.arcoTopLeft
{
width:                 100px; 
height:                100px;
border-radius:         90px 0 0 0;
-moz-border-radius:    90px 0 0 0;
-webkit-border-radius: 90px 0 0 0;
}

Arco Top Right

.arcoTopRight
{
width:                 100px; 
height:                100px;
border-radius:         0 90px 0  0;
-moz-border-radius:    0 90px 0  0;
-webkit-border-radius: 0 90px 0  0;
}

Arco Bottom Right

.arcoBottomRight
{
width:                 100px; 
height:                100px;
border-radius: 	       0 0 90px 0;
-moz-border-radius:    0 0 90px 0;
-webkit-border-radius: 0 0 90px 0;
}

Arco Bottom Left

.arcoBottomLeft
{
width:                 100px; 
height:                100px;
border-radius: 	       0 0 0 90px ;
-moz-border-radius:    0 0 0 90px ;
-webkit-border-radius: 0 0 0 90px ; 
}

Grafico a torta Top

.graficoTop 
{
width:                 0;
height:                0;
border-right:          60px solid red;
border-top:            60px solid transparent;
border-left:           60px solid red;
border-bottom:         60px solid red;
border-radius:         60px;
-moz-border-radius:    60px;
-webkit-border-radius: 60px;
}

Grafico a torta Right

.graficoRight
{
width:                 0;
height:                0;
border-right:          60px solid transparent;
border-top:            60px solid red;
border-left:           60px solid red;
border-bottom:         60px solid red;
border-radius:         60px;
-moz-border-radius:    60px;
-webkit-border-radius: 60px;
}

Grafico a Torta Bottom

.graficoBottom
{
width:                 0;
height:                0;
border-right:          60px solid red;
border-top:            60px solid red;
border-left:           60px solid red;
border-bottom:         60px solid transparent;
border-radius:         60px;
-moz-border-radius:    60px;
-webkit-border-radius: 60px;
}

Grafico a Torta Left

.graficoLeft
{
width:                 0;
height:                0;
border-right:          60px solid red;
border-top:            60px solid red;
border-left:           60px solid transparent;
border-bottom:         60px solid red;
border-radius:         60px;
-moz-border-radius:    60px;
-webkit-border-radius: 60px;
}

Triangolo Top Left

.triangoloTopLeft
{
width:                 0;
height:                0;
border-right:          50px solid transparent;
border-top:            50px solid red;
border-left:           50px solid red;
border-bottom:         50px solid transparent;
}

Triangolo Top Right

.triangoloTopRight
{
width:                 0;
height:                0;
border-right:          50px solid red;
border-top:            50px solid red;
border-left:           50px solid transparent;
border-bottom:         50px solid transparent;
}

Triangolo Bottom Left

.triangoloBottomLeft
{
width:                 0;
height:                0;
border-right:          50px solid transparent;
border-top:            50px solid transparent;
border-left:           50px solid red;
border-bottom:         50px solid red;
}

Triangolo Bottom Right

.triangoloBottomRight
{
width:                 0;
height:                0;
border-right:          50px solid red;
border-top:            50px solid transparent;
border-left:           50px solid transparent;
border-bottom:         50px solid red;
}

Bookmark

.bookmark
{
width:                 0; 
height:                100px; 
border-right:          50px solid red;
border-left:           50px solid red;
border-bottom:         30px solid transparent;

Simbolo Nucleare

.nuclear 
{
width:                 0;
height:                0;
border-bottom:         60px solid black;
border-top:            60px solid black;
border-left:           60px solid yellow;
border-right:          60px solid yellow;
-moz-border-radius:    60px; 
-webkit-border-radius: 60px; 
border-radius:         60px;
}

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati