Come creare 37 forme geometriche tipo quadrato, rettangolo, cerchio, parallelogramma, ellisse, infinito, uovo, cuore, ecc usando solo CSS e HTML.
Ho appena letto un articolo di CSS-Tricks che si può collocare a metà strada tra l'informativo e il giocoso. Gli autori si sono divertiti a creare delle forme geometriche semplicemente utilizzando il linguaggio CSS e senza usare nessuna immagine. Può sembrare abbastanza scontato che con questo sistema si riesca a creare un quadrato o un cerchio ma non lo è più quando abbiamo a che fare con forme più complesse come un esagono, una stella o un cuore.
Riporto qui di seguito il codice per realizzare tutte queste forme. Ricordo che come nel caso del post sugli Effetti CSS per le immagini, il codice si compone di due parti. La prima che va da <style> a </style> può essere anche inserita nel modello subito sopra alla riga </head> mentre la seconda è una semplice riga di HTML che riprende l'id la cui regola si trova appunto nel campo di azione di style. Lo sfondo di tutte le immagini è stato scelto del colore #0060A0 è può ovviamente essere modificato
QUADRATO![quadrato quadrato](http://lh4.ggpht.com/-rqJ5-vhxJVY/Uk7MKbCwDuI/AAAAAAAAjs4/AEk-GCM5xjI/quadrato3.jpg?imgmax=800)
Vedi Demo Quadrato
Codice Quadrato
<style>
#square {
width: 100px;
height: 100px;
background: #0060A0;
}
</style>
<div id="square"></div>
#square {
width: 100px;
height: 100px;
background: #0060A0;
}
</style>
<div id="square"></div>
RETTANGOLO
![rettangolo rettangolo](http://lh6.ggpht.com/-11nCrK7Gdmk/Uk7MMv3B3nI/AAAAAAAAjtA/2-QJA_R6AMw/rettangolo3.jpg?imgmax=800)
Vedi Demo Rettangolo
Codice Rettangolo
<style>
#rectangle {
width: 200px;
height: 100px;
background: #0060A0;
}
</style>
<div id="rectangle"></div>
#rectangle {
width: 200px;
height: 100px;
background: #0060A0;
}
</style>
<div id="rectangle"></div>
CERCHIO
![cerchio cerchio](http://lh3.ggpht.com/-v0HdULFlc6c/Uk7MOpweANI/AAAAAAAAjtI/-M_hxdO0u8Q/cerchio3.jpg?imgmax=800)
Vedi Demo Cerchio
Codice Cerchio
<style>
#circle {
width: 100px;
height: 100px;
background: #0060A0;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
</style>
<div id="circle"></div>
#circle {
width: 100px;
height: 100px;
background: #0060A0;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
</style>
<div id="circle"></div>
ELLISSE
![ellisse ellisse](http://lh5.ggpht.com/-mDAmpEjSBx8/Uk7MQv6YRaI/AAAAAAAAjtQ/bQ4WQB7pMD8/ellisse3.jpg?imgmax=800)
Vedi Demo Ellisse
Codice Ellisse
<style>
#oval {
width: 200px;
height: 100px;
background: #0060A0;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
</style>
<div id="oval"></div>
#oval {
width: 200px;
height: 100px;
background: #0060A0;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
</style>
<div id="oval"></div>
TRIANGOLO UP
![triangolo-up triangolo-up](http://lh4.ggpht.com/-b-OVGxKP3i0/Uk7MSnf3h6I/AAAAAAAAjtY/ipN9A8KIMBU/triangolo-up3.jpg?imgmax=800)
Vedi Demo Triangolo Up
Codice Triangolo Up
<style>
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #0060A0;
}
</style>
<div id="triangle-up"></div>
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #0060A0;
}
</style>
<div id="triangle-up"></div>
TRIANGOLO DOWN
![triangolo-down triangolo-down](http://lh6.ggpht.com/-JoTJ-T8k0MU/Uk7MUYGOTrI/AAAAAAAAjtg/DdUTvOyxMZE/triangolo-down3.jpg?imgmax=800)
Vedi Demo Triangolo Down
Codice Triangolo Down
<style>
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #0060A0;
}
</style>
<div id="triangle-down"></div>
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #0060A0;
}
</style>
<div id="triangle-down"></div>
TRIANGOLO LEFT
![triangolo-left triangolo-left](http://lh5.ggpht.com/-8mGZDf4DQtk/Uk7MWF6eMzI/AAAAAAAAjto/33UyzmSxcjw/triangolo-left3.jpg?imgmax=800)
Vedi Demo Triangolo Left
Codice Triangolo Left
<style>
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #0060A0;
border-bottom: 50px solid transparent;
}
</style>
<div id="triangle-left"></div>
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #0060A0;
border-bottom: 50px solid transparent;
}
</style>
<div id="triangle-left"></div>
TRIANGOLO RIGHT
![triangolo-right triangolo-right](http://lh4.ggpht.com/-YtJN-n3tNdw/Uk7MXyxu4VI/AAAAAAAAjtw/fifeyBZYIFw/triangolo-right3.jpg?imgmax=800)
Vedi Demo Triangolo Right
Codice Triangolo Right
<style>
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid #0060A0;
border-bottom: 50px solid transparent;
}
</style>
<div id="triangle-right"></div>
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid #0060A0;
border-bottom: 50px solid transparent;
}
</style>
<div id="triangle-right"></div>
TRIANGOLO TOPLEFT
![triangolo-topleft triangolo-topleft](http://lh6.ggpht.com/-TqxxXIFIy-g/Uk7MZ9FMFMI/AAAAAAAAjt4/ZGT8URuxp9c/triangolo-topleft3.jpg?imgmax=800)
Vedi Demo Triangolo TopLeft
Codice Triangolo TopLeft
<style>
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid #0060A0;
border-right: 100px solid transparent;
}
</style>
<div id="triangle-topleft"></div>
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid #0060A0;
border-right: 100px solid transparent;
}
</style>
<div id="triangle-topleft"></div>
TRIANGOLO TOPRIGHT
![triangoloo-topright triangoloo-topright](http://lh5.ggpht.com/-CTtkNToVyEA/Uk7MbhWUDEI/AAAAAAAAjuA/qjUHV68GUMQ/triangoloo-topright3.jpg?imgmax=800)
Vedi Demo Triangolo TopRight
Codice Triangolo TopRight
<style>
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid #0060A0;
border-left: 100px solid transparent;
}
</style>
<div id="triangle-topright"></div>
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid #0060A0;
border-left: 100px solid transparent;
}
</style>
<div id="triangle-topright"></div>
TRIANGOLO BOTTOMLEFT
![triangolo-bottomleft triangolo-bottomleft](http://lh4.ggpht.com/-wBwDByA72ws/Uk7MdTvQ5-I/AAAAAAAAjuI/_LWginNQq4Q/triangolo-bottomleft%25255B3%25255D.jpg?imgmax=800)
Vedi Demo Triangolo BottomLeft
Codice Triangolo BottomLeft
<style>
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid #0060A0;
border-right: 100px solid transparent;
}
</style>
<div id="triangle-bottomleft"></div>
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid #0060A0;
border-right: 100px solid transparent;
}
</style>
<div id="triangle-bottomleft"></div>
TRIANGOLO BOTTOMRIGHT
![triangolo-bottomright triangolo-bottomright](http://lh6.ggpht.com/-Av0cT_Ln7ek/Uk7MfBwvanI/AAAAAAAAjuQ/ZGpiTSCEJ_I/triangolo-bottomright%25255B3%25255D.jpg?imgmax=800)
Vedi Demo Triangolo BottomRight
Codice Triangolo BottomRight
<style>
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid #0060A0;
border-left: 100px solid transparent;
}
</style>
<div id="triangle-bottomright"></div>
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid #0060A0;
border-left: 100px solid transparent;
}
</style>
<div id="triangle-bottomright"></div>
FRECCIA CURVA
![freccia-curva freccia-curva](http://lh4.ggpht.com/-vn5zmcVM8bQ/Uk7Mhj8PA3I/AAAAAAAAjuY/XwSPBeD6AF4/freccia-curva%25255B3%25255D.jpg?imgmax=800)
Vedi Demo Freccia Curva
Codice Freccia Curva
<style>
#curvedarrow {
position: relative;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-right: 9px solid #0060A0;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
#curvedarrow:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-top: 3px solid #0060A0;
border-radius: 20px 0 0 0;
top: -12px;
left: -9px;
width: 12px;
height: 12px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
</style>
<div id="curvedarrow"></div>
#curvedarrow {
position: relative;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-right: 9px solid #0060A0;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
#curvedarrow:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-top: 3px solid #0060A0;
border-radius: 20px 0 0 0;
top: -12px;
left: -9px;
width: 12px;
height: 12px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
</style>
<div id="curvedarrow"></div>
TRAPEZOIDE
![trapezoide trapezoide](http://lh5.ggpht.com/-ZASPdid6lcc/Uk7Mk5176fI/AAAAAAAAjug/Hw7rsRjMlFM/trapezoide%25255B3%25255D.jpg?imgmax=800)
Vedi Demo Trapezoide
Codice Trapezoide
<style>
#trapezoid {
border-bottom: 100px solid #0060A0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
</style>
<div id="trapezoid"></div>
#trapezoid {
border-bottom: 100px solid #0060A0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
</style>
<div id="trapezoid"></div>
PARALLELOGRAMMA
![parallelogramma parallelogramma](http://lh5.ggpht.com/-gW4OWqoaW6M/Uk7Mmh_ER6I/AAAAAAAAjuo/k7W_7yDaHGw/parallelogramma%25255B3%25255D.jpg?imgmax=800)
Vedi Demo Parallelogramma
Codice Parallelogramma
<style>
#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: #0060A0;
}
</style>
<div id="parallelogram"></div>
#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: #0060A0;
}
</style>
<div id="parallelogram"></div>
STELLA A 6 PUNTE
![stella-6-punte stella-6-punte](http://lh5.ggpht.com/-J_ucI9jHTkI/Uk7MoaAV5GI/AAAAAAAAjuw/XfPF10YaCgA/stella-6-punte%25255B3%25255D.jpg?imgmax=800)
Vedi Demo Stella a 6 punte
Codice Stella a 6 punte
<style>
#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #0060A0;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #0060A0;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
</style>
<div id="star-six"></div>
#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #0060A0;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #0060A0;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
</style>
<div id="star-six"></div>
STELLA A 5 PUNTE
![stella-5-punte stella-5-punte](http://lh5.ggpht.com/-8mj8qhJ6Q5A/Uk7MqWnhZbI/AAAAAAAAju4/YKr9Zfvsgt0/stella-5-punte%25255B3%25255D.jpg?imgmax=800)
Vedi Demo Stella a 5 Punte
Codice Stella a 5 Punte
<style>
#star-five {
margin: 50px 0;
position: relative;
display: block;
color: #0060A0;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #0060A0;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid #0060A0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg); }
#star-five:after {
position: absolute;
display: block;
color: #0060A0;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #0060A0;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}
</style>
<div id="star-five"></div>
#star-five {
margin: 50px 0;
position: relative;
display: block;
color: #0060A0;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #0060A0;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid #0060A0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg); }
#star-five:after {
position: absolute;
display: block;
color: #0060A0;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #0060A0;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}
</style>
<div id="star-five"></div>
PENTAGONO
![pentagono pentagono](http://lh5.ggpht.com/-uCft65yZxFE/Uk7MsPImeqI/AAAAAAAAjvA/_Rj-HT85UtQ/pentagono%25255B3%25255D.jpg?imgmax=800)
Vedi Demo Pentagono
Codice Pentagono
<style>
#pentagon {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: #0060A0 transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent #0060A0;
}
</style>
<div id="pentagon"></div>
#pentagon {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: #0060A0 transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent #0060A0;
}
</style>
<div id="pentagon"></div>
ESAGONO
![esagono esagono](http://lh6.ggpht.com/-8HEVLVPYgvU/Uk7MuNg_NII/AAAAAAAAjvI/aMZOkfAZI5o/esagono%25255B3%25255D.jpg?imgmax=800)
Vedi Demo Esagono
Codice Esagono
<style>
#hexagon {
width: 100px;
height: 55px;
background: #0060A0;
position: relative;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #0060A0;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #0060A0;
}
</style>
<div id="hexagon"></div>
#hexagon {
width: 100px;
height: 55px;
background: #0060A0;
position: relative;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #0060A0;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #0060A0;
}
</style>
<div id="hexagon"></div>
OTTAGONO
![ottagono ottagono](http://lh4.ggpht.com/-tXrYI8QNvKc/Uk7MwIVhJ_I/AAAAAAAAjvQ/B-nuzQUZVio/ottagono%25255B3%25255D.jpg?imgmax=800)
Vedi Demo Ottagono
Codice Ottagono
<style>
#octagon {
width: 100px;
height: 100px;
background: #0060A0;
position: relative;
}
#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid #0060A0;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
#octagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid #0060A0;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
</style>
<div id="octagon"></div>
#octagon {
width: 100px;
height: 100px;
background: #0060A0;
position: relative;
}
#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid #0060A0;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
#octagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid #0060A0;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
</style>
<div id="octagon"></div>
CUORE
![cuore cuore](http://lh5.ggpht.com/-DVJ4kwdSoYk/Uk7Mx0GvFAI/AAAAAAAAjvY/QDLVtEtur_U/cuore%25255B3%25255D.jpg?imgmax=800)
Vedi Demo Cuore
Codice Cuore
<style>
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #0060A0;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-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%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
</style>
<div id="heart"></div>
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #0060A0;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-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%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
</style>
<div id="heart"></div>
INFINITO
![infinito infinito](http://lh4.ggpht.com/-eaYRNC2HCx4/Uk7MzzK-5II/AAAAAAAAjvg/wACNThyadvk/infinito%25255B3%25255D.jpg?imgmax=800)
Vedi Demo Infinito
Codice Infinito
<style>
#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 #0060A0;
-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);
}
</style>
<div id="infinity"></div>
#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 #0060A0;
-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);
}
</style>
<div id="infinity"></div>
DIAMANTE
![diamante diamante](http://lh5.ggpht.com/-3UIp0kWtluE/Uk7M1moktUI/AAAAAAAAjvo/o5uUvYCsq7I/diamante%25255B3%25255D.jpg?imgmax=800)
Vedi Demo Diamante
Codice Diamante
<style>
#diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: #0060A0;
position: relative;
top: -50px;
}
#diamond:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: #0060A0;
}
</style>
<div id="diamond"></div>
#diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: #0060A0;
position: relative;
top: -50px;
}
#diamond:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: #0060A0;
}
</style>
<div id="diamond"></div>
DIAMANTE SCUDO
![diamante-scudo diamante-scudo](http://lh4.ggpht.com/-ikuntL4wiB8/Uk7M3bQUc-I/AAAAAAAAjvw/tem7q3NuxK8/diamante-scudo%25255B3%25255D.jpg?imgmax=800)
Vedi Demo Diamante Scudo
Codice Diamante Scudo
<style>
#diamond-shield {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 20px solid #0060A0;
position: relative;
top: -50px;
}
#diamond-shield:after {
content: '';
position: absolute;
left: -50px; top: 20px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid #0060A0;
}
</style>
<div id="diamond-shield"></div>
#diamond-shield {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 20px solid #0060A0;
position: relative;
top: -50px;
}
#diamond-shield:after {
content: '';
position: absolute;
left: -50px; top: 20px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid #0060A0;
}
</style>
<div id="diamond-shield"></div>
DIAMANTE LOSANGA
![diamante-losanga diamante-losanga](http://lh6.ggpht.com/-CGFeVbVMabY/Uk7M5d6-LBI/AAAAAAAAjv4/3pbnoymb53E/diamante-losanga%25255B3%25255D.jpg?imgmax=800)
Vedi Demo Diamante Losanga
Codice Diamante Losanga
<style>
#diamond-narrow {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid #0060A0;
position: relative;
top: -50px;
}
#diamond-narrow:after {
content: '';
position: absolute;
left: -50px; top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid #0060A0;
}
</style>
<div id="diamond-narrow"></div>
#diamond-narrow {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid #0060A0;
position: relative;
top: -50px;
}
#diamond-narrow:after {
content: '';
position: absolute;
left: -50px; top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid #0060A0;
}
</style>
<div id="diamond-narrow"></div>
DIAMANTE TAGLIATO
![diamante-tagliato diamante-tagliato](http://lh6.ggpht.com/-quNakxXLRlc/Uk7M7JKvspI/AAAAAAAAjwA/k8AKOakZfJ4/diamante-tagliato%25255B3%25255D.jpg?imgmax=800)
Vedi Demo Diamante Tagliato
Codice Diamante Tagliato
<style>
#cut-diamond {
border-style: solid;
border-color: transparent transparent #0060A0 transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
position: relative;
margin: 20px 0 50px 0;
}
#cut-diamond:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: #0060A0 transparent transparent transparent;
border-width: 70px 50px 0 50px;
}
</style>
<div id="cut-diamond"></div>
#cut-diamond {
border-style: solid;
border-color: transparent transparent #0060A0 transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
position: relative;
margin: 20px 0 50px 0;
}
#cut-diamond:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: #0060A0 transparent transparent transparent;
border-width: 70px 50px 0 50px;
}
</style>
<div id="cut-diamond"></div>
UOVO
![uovo uovo](http://lh6.ggpht.com/-S4c-ioqJWlY/Uk7M9eyurjI/AAAAAAAAjwI/Ad_SqZNEnCg/uovo%25255B3%25255D.jpg?imgmax=800)
Vedi Demo Uovo
Codice Uovo
<style>
#egg {
display:block;
width: 126px;
height: 180px;
background-color: #0060A0;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
</style>
<div id="egg"></div>
#egg {
display:block;
width: 126px;
height: 180px;
background-color: #0060A0;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
</style>
<div id="egg"></div>
PACMAN
![pacman pacman](http://lh3.ggpht.com/-_wI_ixSc2QQ/Uk7M_BzsGbI/AAAAAAAAjwQ/sVEBRrMWSjw/pacman%25255B3%25255D.jpg?imgmax=800)
Vedi Demo Pacman
Codice Pacman
<style>
#pacman {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid #0060A0;
border-left: 60px solid #0060A0;
border-bottom: 60px solid #0060A0;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}
</style>
<div id="pacman"></div>
#pacman {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid #0060A0;
border-left: 60px solid #0060A0;
border-bottom: 60px solid #0060A0;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}
</style>
<div id="pacman"></div>
FUMETTO
![fumetto fumetto](http://lh5.ggpht.com/-gsXE4-Fs0T8/Uk7NA1JnZYI/AAAAAAAAjwY/BLtfuKD1srk/fumetto%25255B3%25255D.jpg?imgmax=800)
Vedi Demo Fumetto
Codice Fumetto
<style>
#talkbubble {
width: 120px;
height: 80px;
background: #0060A0;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid #0060A0;
border-bottom: 13px solid transparent;
}
</style>
<div id="talkbubble"></div>
#talkbubble {
width: 120px;
height: 80px;
background: #0060A0;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid #0060A0;
border-bottom: 13px solid transparent;
}
</style>
<div id="talkbubble"></div>
BURST A 12
![burst-12 burst-12](http://lh4.ggpht.com/-BZv_l-h_h4k/Uk7NCn8XssI/AAAAAAAAjwg/Y7CpmBEhJCo/burst-12%25255B3%25255D.jpg?imgmax=800)
Vedi Demo Burst a 12
Codice Burst a 12
<style>
#burst-12 {
background: #0060A0;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}
#burst-12:before, #burst-12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: #0060A0;
}
#burst-12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
#burst-12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
</style>
<div id="burst-12"></div>
#burst-12 {
background: #0060A0;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}
#burst-12:before, #burst-12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: #0060A0;
}
#burst-12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
#burst-12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
</style>
<div id="burst-12"></div>
BURST A 8
![burst-a-8 burst-a-8](http://lh3.ggpht.com/-iXlkVXwQ09E/Uk7NJREr4lI/AAAAAAAAjwo/77bnO_2MBPE/burst-a-8%25255B3%25255D.jpg?imgmax=800)
Vedi Demo Burst a 8
Codice Burst a 8
<style>
#burst-8 {
background: #0060A0;
width: 80px;
height: 80px;
position: relative;
text-align: center;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20eg);
}
#burst-8:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: #0060A0;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
}
</style>
<div id="burst-8"></div>
#burst-8 {
background: #0060A0;
width: 80px;
height: 80px;
position: relative;
text-align: center;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20eg);
}
#burst-8:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: #0060A0;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
}
</style>
<div id="burst-8"></div>
YIN YANG
![yin-yang yin-yang](http://lh5.ggpht.com/-B_uUOkvy_MM/Uk7NLT1df_I/AAAAAAAAjww/GrhZZKQaQ7g/yin-yang%25255B3%25255D.jpg?imgmax=800)
Vedi Demo Yin Yang
Codice Yin Yang
<style>
#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: #0060A0;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid #0060A0;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: #0060A0;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
</style>
<div id="yin-yang"></div>
#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: #0060A0;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid #0060A0;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: #0060A0;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
</style>
<div id="yin-yang"></div>
BADGE RIBBON
![badge-ribbon badge-ribbon](http://lh5.ggpht.com/-U1SxGMsEE0I/Uk7NNDGS5xI/AAAAAAAAjw4/483_0xEyX34/badge-ribbon%25255B3%25255D.jpg?imgmax=800)
Vedi Demo Badge Ribbon
Codice Badge Ribbon
<style>
#badge-ribbon {
position: relative;
background: #0060A0;
height: 100px;
width: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
#badge-ribbon:before,
#badge-ribbon:after {
content: '';
position: absolute;
border-bottom: 70px solid #0060A0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
top: 70px;
left: -10px;
-webkit-transform: rotate(-140deg);
-moz-transform: rotate(-140deg);
-ms-transform: rotate(-140deg);
-o-transform: rotate(-140deg);
}
#badge-ribbon:after {
left: auto;
right: -10px;
-webkit-transform: rotate(140deg);
-moz-transform: rotate(140deg);
-ms-transform: rotate(140deg);
-o-transform: rotate(140deg);
}
</style>
<div id="badge-ribbon"></div>
#badge-ribbon {
position: relative;
background: #0060A0;
height: 100px;
width: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
#badge-ribbon:before,
#badge-ribbon:after {
content: '';
position: absolute;
border-bottom: 70px solid #0060A0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
top: 70px;
left: -10px;
-webkit-transform: rotate(-140deg);
-moz-transform: rotate(-140deg);
-ms-transform: rotate(-140deg);
-o-transform: rotate(-140deg);
}
#badge-ribbon:after {
left: auto;
right: -10px;
-webkit-transform: rotate(140deg);
-moz-transform: rotate(140deg);
-ms-transform: rotate(140deg);
-o-transform: rotate(140deg);
}
</style>
<div id="badge-ribbon"></div>
SPACE INVADER
![space-invader space-invader](http://lh5.ggpht.com/-eqxafKpYCE8/Uk7NRVEJKiI/AAAAAAAAjxA/Ib66CNlyZ0Q/space-invader%25255B3%25255D.jpg?imgmax=800)
Vedi Demo Space Invader
Codice Space Invader
<style>
#space-invader{
box-shadow:
0 0 0 1em #0060A0,
0 1em 0 1em #0060A0,
-2.5em 1.5em 0 .5em #0060A0,
2.5em 1.5em 0 .5em #0060A0,
-3em -3em 0 0 #0060A0,
3em -3em 0 0 #0060A0,
-2em -2em 0 0 #0060A0,
2em -2em 0 0 #0060A0,
-3em -1em 0 0 #0060A0,
-2em -1em 0 0 #0060A0,
2em -1em 0 0 #0060A0,
3em -1em 0 0 #0060A0,
-4em 0 0 0 #0060A0,
-3em 0 0 0 #0060A0,
3em 0 0 0 #0060A0,
4em 0 0 0 #0060A0,
-5em 1em 0 0 #0060A0,
-4em 1em 0 0 #0060A0,
4em 1em 0 0 #0060A0,
5em 1em 0 0 #0060A0,
-5em 2em 0 0 #0060A0,
5em 2em 0 0 #0060A0,
-5em 3em 0 0 #0060A0,
-3em 3em 0 0 #0060A0,
3em 3em 0 0 #0060A0,
5em 3em 0 0 #0060A0,
-2em 4em 0 0 #0060A0,
-1em 4em 0 0 #0060A0,
1em 4em 0 0 #0060A0,
2em 4em 0 0 #0060A0;
background: #0060A0;
width: 1em;
height: 1em;
overflow: hidden;
margin: 50px 0 70px 65px;
}
</style>
<div id="space-invader"></div>
#space-invader{
box-shadow:
0 0 0 1em #0060A0,
0 1em 0 1em #0060A0,
-2.5em 1.5em 0 .5em #0060A0,
2.5em 1.5em 0 .5em #0060A0,
-3em -3em 0 0 #0060A0,
3em -3em 0 0 #0060A0,
-2em -2em 0 0 #0060A0,
2em -2em 0 0 #0060A0,
-3em -1em 0 0 #0060A0,
-2em -1em 0 0 #0060A0,
2em -1em 0 0 #0060A0,
3em -1em 0 0 #0060A0,
-4em 0 0 0 #0060A0,
-3em 0 0 0 #0060A0,
3em 0 0 0 #0060A0,
4em 0 0 0 #0060A0,
-5em 1em 0 0 #0060A0,
-4em 1em 0 0 #0060A0,
4em 1em 0 0 #0060A0,
5em 1em 0 0 #0060A0,
-5em 2em 0 0 #0060A0,
5em 2em 0 0 #0060A0,
-5em 3em 0 0 #0060A0,
-3em 3em 0 0 #0060A0,
3em 3em 0 0 #0060A0,
5em 3em 0 0 #0060A0,
-2em 4em 0 0 #0060A0,
-1em 4em 0 0 #0060A0,
1em 4em 0 0 #0060A0,
2em 4em 0 0 #0060A0;
background: #0060A0;
width: 1em;
height: 1em;
overflow: hidden;
margin: 50px 0 70px 65px;
}
</style>
<div id="space-invader"></div>
SCHERMO TV
![schermo-televisione schermo-televisione](http://lh4.ggpht.com/-pzawAU6v2RI/Uk7NTMLB1II/AAAAAAAAjxI/04s3BjS9Lxw/schermo-televisione%25255B3%25255D.jpg?imgmax=800)
Vedi Demo TV Screen
Codice TV Screen
<style>
#tv {
position: relative;
width: 200px;
height: 150px;
margin: 20px 0;
background: #0060A0;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: .1em;
}
#tv:before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
</style>
<div id="tv"></div>
#tv {
position: relative;
width: 200px;
height: 150px;
margin: 20px 0;
background: #0060A0;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: .1em;
}
#tv:before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
</style>
<div id="tv"></div>
CHEVRON
![chevron chevron](http://lh6.ggpht.com/-BLolK4K_gDs/Uk7NVIHXuoI/AAAAAAAAjxQ/-jmCyMP2638/chevron%25255B3%25255D.jpg?imgmax=800)
Vedi Demo Chevron
Codice Chevron
<style>
#chevron {
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px;
width: 200px;
}
#chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: #0060A0;
-webkit-transform: skew(0deg, 6deg);
-moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg);
}
#chevron:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: #0060A0;
-webkit-transform: skew(0deg, -6deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -6deg);
}
</style>
<div id="chevron"></div>
#chevron {
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px;
width: 200px;
}
#chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: #0060A0;
-webkit-transform: skew(0deg, 6deg);
-moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg);
}
#chevron:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: #0060A0;
-webkit-transform: skew(0deg, -6deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -6deg);
}
</style>
<div id="chevron"></div>
LENTE DI INGRANDIMENTO
![lente-ingrandimento[4] lente-ingrandimento[4]](http://lh6.ggpht.com/-4SCu0J72mw4/Uk7NW1_kKGI/AAAAAAAAjxY/zpk8hoO7MO8/lente-ingrandimento%25255B4%25255D%25255B2%25255D.jpg?imgmax=800)
Vedi Demo Lente Ingrandimento
Codice Lente Ingrandimento
<style>
#magnifying-glass
{
font-size: 10em; /* Dimensione */
display: inline-block;
width: 0.4em;
height: 0.4em;
border: 0.1em solid #0060A0;
position: relative;
border-radius: 0.35em;
}
#magnifying-glass::before
{
content: "";
display: inline-block;
position: absolute;
right: -0.25em;
bottom: -0.1em;
border-width: 0;
background: #0060A0;
width: 0.35em;
height: 0.08em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
</style>
<div id="magnifying-glass"></div>
#magnifying-glass
{
font-size: 10em; /* Dimensione */
display: inline-block;
width: 0.4em;
height: 0.4em;
border: 0.1em solid #0060A0;
position: relative;
border-radius: 0.35em;
}
#magnifying-glass::before
{
content: "";
display: inline-block;
position: absolute;
right: -0.25em;
bottom: -0.1em;
border-width: 0;
background: #0060A0;
width: 0.35em;
height: 0.08em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
</style>
<div id="magnifying-glass"></div>
COME USARE QUESTI CODICI
Per brevità facciamo un esempio con quello che è il codice dell'uovo. Se integrato come segue con le righe evidenziate di giallo con opportuni colori e famiglie di font può servire per un Buona Pasqua in CSS
<style>
#egg {
display:block;
width: 126px;
height: 180px;
background-color: #0060A0;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
#egg p {
font-family:Georgia;
font-size:18px;
font-weight:bold;
color:#fff;
text-align:center;
padding-top:50px
}</style>
<div id="egg">
<p>Buona<br/>Pasqua</p>
</div>
#egg {
display:block;
width: 126px;
height: 180px;
background-color: #0060A0;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
#egg p {
font-family:Georgia;
font-size:18px;
font-weight:bold;
color:#fff;
text-align:center;
padding-top:50px
}</style>
<div id="egg">
<p>Buona<br/>Pasqua</p>
</div>
che avrà questo aspetto
![buona-pasqua buona-pasqua](http://lh3.ggpht.com/-gMEKIZDZnLs/Uk7NYh6awUI/AAAAAAAAjxg/1KFQHexsDz8/buona-pasqua%25255B3%25255D.jpg?imgmax=800)
I più romantici possono usare il cuore mentre le altre forme hanno miriadi di applicazioni.
Ma che figata!
RispondiEliminaMa perché usare il css al posto delle.immagini?
Con il css il sito risulta meno pesante?
È un gioco ma c'è anche quella ragione
Elimina@#
Ciao ...
RispondiEliminaMi è sorta una domanda spontanea.
Il link ai vari demo atterrano esattamente nella posizione delle varie figure geometriche (es. ....#magnifying-glass1)
E' un ancortext nel post .. di arrivo?
Grazie
È cosa abbastanza semplice ma non si può spiegare in un commento. Ho salvato la domanda e ci farò un post in seguito
Elimina@#