Pubblicato il 04/10/13 - aggiornato il  | 4 commenti :

Come creare 37 forme geometriche con HTML e CSS.

By con etichette , ,
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
Vedi Demo Quadrato
Codice Quadrato

<style>
#square {
    width: 100px;
    height: 100px;
    background: #0060A0;
}
</style>
<div id="square"></div>

 RETTANGOLO
rettangolo
Vedi Demo Rettangolo
Codice Rettangolo

<style>
#rectangle {
    width: 200px;
    height: 100px;
    background: #0060A0;
}
</style>
<div id="rectangle"></div>

 CERCHIO
cerchio
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>

 ELLISSE
ellisse
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>

 TRIANGOLO UP
triangolo-up
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>







 TRIANGOLO DOWN
triangolo-down
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>

 TRIANGOLO LEFT
triangolo-left
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>

 TRIANGOLO RIGHT
triangolo-right
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>

 TRIANGOLO TOPLEFT
triangolo-topleft

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>

 TRIANGOLO TOPRIGHT
triangoloo-topright
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>

 TRIANGOLO BOTTOMLEFT
triangolo-bottomleft

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>

 TRIANGOLO BOTTOMRIGHT
triangolo-bottomright
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>

 FRECCIA CURVA
freccia-curva
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>

 TRAPEZOIDE
trapezoide
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>

 PARALLELOGRAMMA
parallelogramma
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>

 STELLA A 6 PUNTE
stella-6-punte
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>

 STELLA A 5 PUNTE
stella-5-punte
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>

 PENTAGONO
pentagono
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>

 ESAGONO
esagono
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>

 OTTAGONO
ottagono
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>

 CUORE
cuore
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>

 INFINITO
infinito
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>

 DIAMANTE
diamante
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>

 DIAMANTE SCUDO
diamante-scudo
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>

 DIAMANTE LOSANGA
diamante-losanga
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>

 DIAMANTE TAGLIATO
diamante-tagliato
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>

 UOVO
uovo
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>

 PACMAN
pacman
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>

 FUMETTO
fumetto
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>

 BURST A 12
burst-12
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 A 8
burst-a-8
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>

 YIN YANG
yin-yang
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>

 BADGE RIBBON
badge-ribbon
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>

 SPACE INVADER
space-invader
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>

 SCHERMO TV
schermo-televisione
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>

 CHEVRON
chevron
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>

 LENTE DI INGRANDIMENTO
lente-ingrandimento[4]
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>

 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>

che avrà questo aspetto

buona-pasqua

I più romantici possono usare il cuore mentre le altre forme hanno miriadi di applicazioni.


4 commenti :

  1. Unknown5 ottobre 2013 alle ore 01:12

    Ma che figata!
    Ma perché usare il css al posto delle.immagini?

    Con il css il sito risulta meno pesante?

    RispondiElimina
  2. Unknown5 ottobre 2013 alle ore 11:15

    Ciao ...
    Mi è 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

    RispondiElimina
    Risposte
    1. Ernesto Tirinnanzi5 ottobre 2013 alle ore 11:47

      È cosa abbastanza semplice ma non si può spiegare in un commento. Ho salvato la domanda e ci farò un post in seguito
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy

Iscriviti a: Commenti sul post ( Atom )