Les formes en CSS

Carré

.carre { width:100px; height:100px;  background-color:red; }

Rectangle

.rectangle { width:200px; height:100px; background-color:red; }

Cercle

.cercle		{ width:100px; height:100px; background-color:red; 
                  -moz-border-radius:50px; 
                  -webkit-border-radius:50px; 
                  border-radius: 50px; }

Oval

.oval 		{ width:200px; height:100px; background-color:red;
                  -moz-border-radius:100px / 50px; 
                  -webkit-border-radius:100px / 50px; 
                  border-radius:100px / 50px; }

Triangle haut

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

Triangle bas

.triangle-down { width:0; height:0; margin:0 auto;
                 border-left:50px solid transparent; 
                 border-right:50px solid transparent; 
                 border-top:100px solid red; }

Triangle gauche

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

Triangle droit

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

Triangle haut gauche

.triangle-topleft { width:0; height:0; 
                    border-top:100px solid red; 
                    border-right:100px solid transparent; }

Triangle haut droit

.triangle-topright { width:0; height:0; 
                     border-top:100px solid red; 
                     border-left:100px solid transparent; }

Triangle bas gauche

.triangle-bottomleft { width:0; height:0; 
                       border-bottom:100px solid red; 
                       border-right:100px solid transparent; }

Triangle bas droit

.triangle-bottomright { width:0; height:0; 
                        border-bottom:100px solid red; 
                        border-left:100px solid transparent; }

Flèche courbe

.curvedarrow        { position:relative; width:0; height:0; 
                      border-top:9px solid transparent; 
                      border-right:9px solid red; 
                      -webkit-transform:rotate(10deg); 
                      -moz-transform:rotate(10deg); 
                      -ms-transform:rotate(10deg); 
                      -o-transform:rotate(10deg); } 
.curvedarrow:after { content:""; position:absolute; top:-12px; left:-9px;  
                     width:12px; height:12px;
                     border:0 solid transparent; 
                     border-top:3px solid red;
                     border-radius:20px 0 0 0; 
                     -webkit-transform:rotate(45deg); 
                     -moz-transform:rotate(45deg); 
                     -ms-transform:rotate(45deg); 
                     -o-transform:rotate(45deg); }

Trapèze

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

Parallelogramme

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

Étoile à 6 branches

.star-six         { position:relative; width:0; height:0; 
                    border-left:50px solid transparent; 
                    border-right:50px solid transparent; 
                    border-bottom:100px solid red; } 
.star-six:after   { content:""; position:absolute; top:30px; left:-50px; 
                    width:0; height:0; 
                    border-left:50px solid transparent; 
                    border-right:50px solid transparent; 
                    border-top:100px solid red; }

Étoile à 5 branches

.star-five        { position:relative; 
                    width:0px; height:0px; margin:50px 0; 
                    display:block; color:red;
                    border-right:100px solid transparent; 
                    border-bottom:70px solid red; 
                    border-left:100px solid transparent; 
                    -moz-transform:rotate(35deg); 
                    -webkit-transform:rotate(35deg); 
                    -ms-transform:rotate(35deg); 
                    -o-transform:rotate(35deg); } 
.star-five:before { content: ''; display: block; 
                    position:absolute; top:-45px; left:-65px;  
                    height:0; width:0;
                    border-bottom:80px solid red; 
                    border-left:30px solid transparent; 
                    border-right:30px solid transparent; 
                    -webkit-transform: rotate(-35deg); 
                    -moz-transform: rotate(-35deg); 
                    -ms-transform: rotate(-35deg); 
                    -o-transform: rotate(-35deg); } 
.star-five:after  { content: ''; display:block;
                    width:0px; height:0px;
                    position:absolute; top:3px; left:-105px; 
                    color:red; 
                    border-right:100px solid transparent; 
                    border-bottom:70px solid red; 
                    border-left:100px solid transparent; 
                    -webkit-transform:rotate(-70deg); 
                    -moz-transform:rotate(-70deg); 
                    -ms-transform:rotate(-70deg); 
                    -o-transform:rotate(-70deg); }

Pentagone

.pentagon         { position:relative; width:54px; 
                    border-width:50px 18px 0; 
                    border-style:solid; 
                    border-color:red transparent; } 
.pentagon:before  { content:""; 
                    position:absolute; top:-85px; left:-18px; 
                    width:0; height:0; 
                    border-width:0 45px 35px; 
                    border-style:solid; 
                    border-color:transparent transparent red; }

Hexagone

.hexagon          { position:relative; 
                    width:100px; height:55px; background:red; } 
.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 red; } 
.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 red; }

Octogone

.octagon         { position:relative; 
                   width:100px; height:100px; 
                   background:red; } 
.octagon:before  { content:""; 
                   position:absolute; top:0; left:0;
                   width:42px; height:0; 
                   border-bottom:29px solid red; 
                   border-left:29px solid #eee; 
                   border-right:29px solid #eee; } 
.octagon:after   { content:""; 
                   position:absolute; bottom:0; left:0;
                   width:42px; height:0; 
                   border-top:29px solid red; 
                   border-left:29px solid #eee; 
                   border-right:29px solid #eee; }

Cœur

.heart           { position:relative; 
                   width:100px; height:90px; } 
.heart:before, 
.heart:after     { content:""; 
                   position:absolute; left:50px; top:0; 
                   width:50px; height:80px; 
                   background:red; 
                   -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%; }

Infini

.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); }

Diamant carré

.diamond        { position:relative; top:-50px; 
                  width:0; height:0; 
                  border:50px solid transparent; 
                  border-bottom-color:red; } 
.diamond:after  { content:''; 
                  position:absolute; left:-50px; top:50px; 
                  width:0; height:0; 
                  border:50px solid transparent; 
                  border-top-color:red; }

Diamant bouclié

.diamond-shield       { position:relative; top:-50px; 
                        width:0; height:0; 
                        border:50px solid transparent; 
                        border-bottom:20px solid red; } 
.diamond-shield:after { content: ''; 
                        position:absolute; left:-50px; top:20px; 
                        width:0; height:0; 
                        border:50px solid transparent; 
                        border-top:70px solid red; }

Diamant étroit

.diamond-narrow       { position:relative; top:-50px; 
                        width:0; height:0; 
                        border:50px solid transparent; 
                        border-bottom:70px solid red; } 
.diamond-narrow:after { content:''; 
                        position:absolute; left:-50px; top:70px; 
                        width:0; height:0; 
                        border:50px solid transparent; 
                        border-top:70px solid red; }

Diamant coupé

.cut-diamond          { position:relative; 
                        width:50px; height:0; 
                        border-style:solid; 
                        border-color:transparent transparent red transparent; 
                        border-width:0 25px 25px 25px; } 
.cut-diamond:after    { content:""; 
                        position:absolute; top:25px; left:-25px; 
                        width:0; height:0; 
                        border-style:solid; 
                        border-color:red transparent transparent transparent; 
                        border-width:70px 50px 0 50px; }

Œuf

.egg       { display:block; 
             width:126px; height:180px; 
             background-color:red; 
             -webkit-border-radius:63px 63px 63px 63px / 108px 108px 72px 72px; 
             border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; }

Pacman

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

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

Bulle de conversation

.talkbubble        { position:relative; 
                     width:120px; height:80px; 
					 background:red; 
					 -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 red; 
					 border-bottom:13px solid transparent; }

Explosion

.burst-12        { position:relative; 
                   width:80px; height:80px;
                   background:red; 
                   text-align:center; } 
.burst-12:before, 
.burst-12:after  { content:""; 
                   position:absolute; top:0; left:0; 
                   height:80px; width:80px; 
                   background:red; } 
.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); }

Explosion 2

.burst-8         { position:relative; 
                   width:80px; height:80px; 
                   background:red; 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:red; 
                   -webkit-transform:rotate(135deg); 
                   -moz-transform:rotate(135deg); 
                   -ms-transform:rotate(135deg); 
                   -o-transform:rotate(135deg); }

Yin Yang

.yin-yang        { position:relative; 
                   width:96px; height:48px; 
                   background:#eee; border-color:red; 
                   border-style:solid; 
                   border-width:2px 2px 50px 2px; 
                   border-radius:100%; } 
.yin-yang:before { content:""; 
                   position:absolute; top:50%; left:0;
                   width:12px; height:12px; 
                   background:#eee; 
                   border:18px solid red; 
                   border-radius:100%; } 
.yin-yang:after  { content:""; 
                   position:absolute; top:50%; left:50%;
                   width:12px; height:12px; 
                   background:red; 
                   border:18px solid #eee; 
                   border-radius:100%; }

Ruban de badge

.badge-ribbon       { position:relative; 
                      width:100px; height:100px; 
                      background:red; 
                      -moz-border-radius:50px; 
                      -webkit-border-radius:50px; 
                      border-radius:50px; } 
.badge-ribbon:before, 
.badge-ribbon:after { content:''; 
                      position:absolute; top:70px; left:-10px; 
                      border-bottom:70px solid red; 
                      border-left:40px solid transparent; 
                      border-right: 40px solid transparent; 
                      -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); }

Envahisseur de l'espace

.space-invader      { width:1em; height:1em; 
                      overflow:hidden;
                      box-shadow:0 0 0 1em red,
                      0 1em 0 1em red,
                      -2.5em 1.5em 0 .5em red, 
                      2.5em 1.5em 0 .5em red,
                      -3em -3em 0 0 red,
                      3em -3em 0 0 red,
                      -2em -2em 0 0 red,
                      2em -2em 0 0 red, 
                      -3em -1em 0 0 red, 
                      -2em -1em 0 0 red, 
                      2em -1em 0 0 red, 
                      3em -1em 0 0 red, 
                      -4em 0 0 0 red, 
                      -3em 0 0 0 red, 
                      3em 0 0 0 red, 
                      4em 0 0 0 red, 
                      -5em 1em 0 0 red, 
                      -4em 1em 0 0 red, 
                      4em 1em 0 0 red, 
                      5em 1em 0 0 red, 
                      -5em 2em 0 0 red, 
                      5em 2em 0 0 red, 
                      -5em 3em 0 0 red, 
                      -3em 3em 0 0 red, 
                      3em 3em 0 0 red, 
                      5em 3em 0 0 red, 
                      -2em 4em 0 0 red, 
                      -1em 4em 0 0 red, 
                      1em 4em 0 0 red, 
                      2em 4em 0 0 red; 
                      background:red; }

Écran de télévision

.tv           { position:relative; 
                width:200px; height:150px; margin:20px auto; 
                background:red; 
                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%; }

Chevron

.chevron        { position:relative; 
                  height:60px; width:200px;
                  text-align:center; } 
.chevron:before { content:''; 
                  position:absolute; top:0; left:0; 
                  width:51%; height:100%; 
                  background:red; 
                  -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; 
                  width:50%; height:100%; 
                  background:red; 
                  -webkit-transform:skew(0deg, -6deg); 
                  -moz-transform:skew(0deg, -6deg); 
                  -ms-transform:skew(0deg, -6deg); 
                  -o-transform:skew(0deg, -6deg); 
                  transform:skew(0deg, -6deg); }

Loupe

.loupe             { position: relative; 
                     display: inline-block; 
                     font-size: 10em; /* This controls the size. */
                     width:0.4em; height:0.4em; margin:0 auto;
                     border:0.1em solid red; 
                     border-radius: 0.35em;  }
.loupe:before      { content: "";
                     display: inline-block;
                     position: absolute;
                     right: -0.25em;
                     bottom: -0.1em;
                     border-width: 0;
                     background: red;
                     width: 0.35em;
                     height: 0.08em;
                     -webkit-transform: rotate(45deg);
                     -moz-transform: rotate(45deg);
                     -ms-transform: rotate(45deg);
                     -o-transform: rotate(45deg); }

Bienvenue sur le site de Jef

La foire aux questions

Les formes

Carré

Rectangle

Cercle

Oval

Triangle haut

Triangle bas

Triangle gauche

Triangle droit

Triangle haut gauche

Triangle haut droit

Triangle bas gauche

Triangle bas droit

Flèche courbe

Trapèze

Parallelogramme

Étoile à 6 branches

Étoile à 5 branches

Pentagone

Hexagone

Octogone

Cœur

Infini

Diamant carré

Diamant bouclié

Diamant étroit

Diamant coupé

Œuf

Pacman

Bulle de conversation

Explosion

Explosion 2

Yin Yang

Ruban de badge

Envahisseur de l'espace

Écran de télévision

Chevron

Loupe