Etude des variations du carré en css

Director: Abadie joris (born Juillet 17, 1990)
Homme et Temps joris Abadie

Symbolique des termes.

width veut dire la largeur
height veut dire la hauteur
background veut dire le fond
border veut dire le bord

Etude sur le rectangle en css.

Le rectangle faiblement arrondie
.rectangle1{position: absolute; width: 80px; height: 40px; background: #ff9999; -webkit-border-radius: 40px 40px 40px 40px / 80px 80px 80px 80px; border-radius: 40px 40px 40px 40px / 80px 80px 80px 80px;-moz-border-radius: 40px 40px 40px 40px / 80px 80px 80px 80px;-o-border-radius:40px 40px 40px 40px / 80px 80px 80px 80px;}




Le rectangle fortement arrondie
.rectangle2{position: absolute; width: 80px; height: 40px; background: #ff9999; -webkit-border-radius:80px 80px 80px 80px/40px 40px 40px 40px; border-radius:80px 80px 80px 80px/40px 40px 40px 40px;-moz-border-radius:80px 80px 80px 80px/40px 40px 40px 40px;-o-border-radius:80px 80px 80px 80px/40px 40px 40px 40px;}





Le rectangle
.rectangle3{position: absolute; width: 80px; height: 40px; background: #ff9999; -webkit-border-radius:40px 40px 80px 80px/40px 40px 80px 80px; border-radius:40px 40px 80px 80px/40px 40px 80px 80px;-moz-border-radius:40px 40px 80px 80px/40px 40px 80px 80px;-o-border-radius:40px 40px 80px 80px/40px 40px 80px 80px;}




Le rectangle
.rectangle4{position: absolute; width: 80px; height: 40px; background: #ff9999; -webkit-border-radius:80px 80px 40px 40px/80px 80px 40px 40px; border-radius:80px 80px 40px 40px/80px 80px 40px 40px;-moz-border-radius:80px 80px 40px 40px/80px 80px 40px 40px;-o-border-radius:80px 80px 40px 40px/80px 80px 40px 40px;}





Le rectangle
.rectangle5{position: absolute; width: 80px; height: 40px; background: #ff9999; -webkit-border-radius:80px 40px 40px 40px/40px 80px 80px 80px; border-radius:80px 40px 40px 40px/40px 80px 80px 80px;-moz-border-radius:80px 40px 40px 40px/40px 80px 80px 80px;-o-border-radius:80px 40px 40px 40px/40px 80px 80px 80px;}




Le rectangle

.rectangle6{position: absolute; width: 80px; height: 40px; background: #ff9999; -webkit-border-radius:800px 80px 80px 80px/40px 40px 40px 40px; border-radius:800px 80px 80px 80px/40px 40px 40px 40px;-moz-border-radius:800px 80px 80px 80px/40px 40px 40px 40px;-o-border-radius:800px 80px 80px 80px/40px 40px 40px 40px;}





Le rectangle
.rectangle7{position: absolute; width: 80px; height: 40px; background: #ff9999; -webkit-border-radius:4px 40px 40px 40px/80px 80px 80px 80px; border-radius:4px 40px 40px 40px/80px 80px 80px 80px;-moz-border-radius:4px 40px 40px 40px/80px 80px 80px 80px;-o-border-radius:4px 40px 40px 40px/80px 80px 80px 80px;}




Le rectangle
.rectangle8{position: absolute; width: 80px; height: 40px; background: #ff9999; -webkit-border-radius:40px 40px 40px 40px/40px 40px 40px 40px; border-radius:40px 40px 40px 40px/40px 40px 40px 40px;-moz-border-radius:40px 40px 40px 40px/40px 40px 40px 40px;-o-border-radius:40px 40px 40px 40px/40px 40px 40px 40px;}





Le rectangle sans radius ou rectangle pure
.rectangle9{position: absolute; width: 80px; height: 40px; background: #ff9999; -webkit-border-radius:0px 0px 0px 0px/0px 0px 0px 0px;border-radius:0px 0px 0px 0px/0px 0px 0px 0px;-moz-border-radius:0px 0px 0px 0px/0px 0px 0px 0px;-o-border-radius:0px 0px 0px 0px/0px 0px 0px 0px;}





Le rectangle pour firefox avec pourcentage pour une construction plus facile
.rectangle10{position: absolute; width: 80px; height: 40px; background: #ff9999; -webkit-border-radius:72px 1px 1px 72px/36px 36px 0px 0px;border-radius:90% 1% 1% 90%/90% 90% 1% 1%;-moz-border-radius:72px 1px 1px 72px/36px 36px 0px 0px;-o-border-radius:72px 1px 1px 72px/36px 36px 0px 0px;}





Le rectangle identique au précédent avec px en remplacement de %
.rectangle11{position: absolute; width: 80px; height: 40px; background: #ff9999; -webkit-border-radius:72px 1px 1px 72px/36px 36px 0px 0px;border-radius:72px 1px 1px 72px/36px 36px 0px 0px;-moz-border-radius:72px 1px 1px 72px/36px 36px 0px 0px;-o-border-radius:72px 1px 1px 72px/36px 36px 0px 0px;}





Le rectangle en quart bas gauche
.rectangle12{position: absolute; width: 80px; height: 40px; background: #ff9999; -webkit-border-radius:72px 1px 1px 72px/0px 0px 36px 36px;border-radius:90% 1% 1% 90% / 1% 1% 90% 90%;-moz-border-radius:72px 1px 1px 72px/0px 0px 36px 36px;-o-border-radius:72px 1px 1px 72px/0px 0px 36px 36px;}





Le rectangle en quart haut droit
.rectangle13{position: absolute; width: 80px; height: 40px; background: #ff9999; -webkit-border-radius:1px 72px 1px 72px/36px 36px 0px 0px;border-radius:1% 90% 1% 90% / 90% 90% 1% 1%;-moz-border-radius:1px 72px 1px 72px/36px 36px 0px 0px;-o-border-radius:1px 72px 1px 72px/36px 36px 0px 0px;}





Le rectangle en quart bas droit
.rectangle14{position: absolute; width: 80px; height: 40px; background: #ff9999; -webkit-border-radius:1px 72px 72px 1px/0px 0px 36px 36px; border-radius:1% 90% 90% 1% / 1% 1% 90% 90%;-moz-border-radius:1px 72px 72px 1px/0px 0px 36px 36px;-o-border-radius:1px 72px 72px 1px/0px 0px 36px 36px;}





Le rectangle pointe droite
.rectangle15{position: absolute; width: 80px; height: 40px; background: #ff9999; -webkit-border-radius:1px 72px 72px 1px/0px 36px 36px 36px; border-radius:1% 90% 90% 1% / 1% 90% 90% 90%;-moz-border-radius:1px 72px 72px 1px/0px 36px 36px 36px;-o-border-radius:1px 72px 72px 1px/0px 36px 36px 36px;}





Le rectangle à pointes descendantes
.rectangle16{position: absolute; width: 80px; height: 40px; background: #ff9999; -webkit-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;border-radius:1% 90% 1% 90% / 90% 90% 1% 90%;-moz-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;-o-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;}





Etude sur le carré en css.

Le carré faiblement arrondie
.carrer1{position: absolute; width: 40px; height: 40px; background: #ff9999; -webkit-border-radius: 40px 40px 40px 40px / 80px 80px 80px 80px; border-radius: 40px 40px 40px 40px / 80px 80px 80px 80px;-moz-border-radius: 40px 40px 40px 40px / 80px 80px 80px 80px;-o-border-radius:40px 40px 40px 40px / 80px 80px 80px 80px;}




Le carré fortement arrondie
.carrer2{position: absolute; width: 40px; height: 40px; background: #ff9999; -webkit-border-radius:80px 80px 80px 80px/40px 40px 40px 40px; border-radius:80px 80px 80px 80px/40px 40px 40px 40px;-moz-border-radius:80px 80px 80px 80px/40px 40px 40px 40px;-o-border-radius:80px 80px 80px 80px/40px 40px 40px 40px;}





Le carré
.carrer3{position: absolute; width: 40px; height: 40px; background: #ff9999; -webkit-border-radius:40px 40px 80px 80px/40px 40px 80px 80px; border-radius:40px 40px 80px 80px/40px 40px 80px 80px;-moz-border-radius:40px 40px 80px 80px/40px 40px 80px 80px;-o-border-radius:40px 40px 80px 80px/40px 40px 80px 80px;}




Le carré
.carrer4{position: absolute; width: 40px; height: 40px; background: #ff9999; -webkit-border-radius:80px 80px 40px 40px/80px 80px 40px 40px; border-radius:80px 80px 40px 40px/80px 80px 40px 40px;-moz-border-radius:80px 80px 40px 40px/80px 80px 40px 40px;-o-border-radius:80px 80px 40px 40px/80px 80px 40px 40px;}





Le carré
.carrer5{position: absolute; width: 40px; height: 40px; background: #ff9999; -webkit-border-radius:80px 40px 40px 40px/40px 80px 80px 80px; border-radius:80px 40px 40px 40px/40px 80px 80px 80px;-moz-border-radius:80px 40px 40px 40px/40px 80px 80px 80px;-o-border-radius:80px 40px 40px 40px/40px 80px 80px 80px;}




Le carré

.carrer6{position: absolute; width: 40px; height: 40px; background: #ff9999; -webkit-border-radius:800px 80px 80px 80px/40px 40px 40px 40px; border-radius:800px 80px 80px 80px/40px 40px 40px 40px;-moz-border-radius:800px 80px 80px 80px/40px 40px 40px 40px;-o-border-radius:800px 80px 80px 80px/40px 40px 40px 40px;}





Le carré
.carrer7{position: absolute; width: 40px; height: 40px; background: #ff9999; -webkit-border-radius:4px 40px 40px 40px/80px 80px 80px 80px; border-radius:4px 40px 40px 40px/80px 80px 80px 80px;-moz-border-radius:4px 40px 40px 40px/80px 80px 80px 80px;-o-border-radius:4px 40px 40px 40px/80px 80px 80px 80px;}




Le carré en forme de cercle
.carrer8{position: absolute; width: 40px; height: 40px; background: #ff9999; -webkit-border-radius:40px 40px 40px 40px/40px 40px 40px 40px; border-radius:40px 40px 40px 40px/40px 40px 40px 40px;-moz-border-radius:40px 40px 40px 40px/40px 40px 40px 40px;-o-border-radius:40px 40px 40px 40px/40px 40px 40px 40px;}





Le carré sans radius ou carré pure
.carrer9{position: absolute; width: 40px; height: 40px; background: #ff9999; -webkit-border-radius:0px 0px 0px 0px/0px 0px 0px 0px;border-radius:0px 0px 0px 0px/0px 0px 0px 0px;-moz-border-radius:0px 0px 0px 0px/0px 0px 0px 0px;-o-border-radius:0px 0px 0px 0px/0px 0px 0px 0px;}





Le carré pour firefox avec pourcentage pour une construction plus facile
.carrer10{position: absolute; width: 40px; height: 40px; background: #ff9999; -webkit-border-radius:72px 1px 1px 72px/36px 36px 0px 0px;border-radius:90% 1% 1% 90%/90% 90% 1% 1%;-moz-border-radius:72px 1px 1px 72px/36px 36px 0px 0px;-o-border-radius:72px 1px 1px 72px/36px 36px 0px 0px;}





Le carré identique au précédent avec px en remplacement de %
.carrer11{position: absolute; width: 40px; height: 40px; background: #ff9999; -webkit-border-radius:72px 1px 1px 72px/36px 36px 0px 0px;border-radius:72px 1px 1px 72px/36px 36px 0px 0px;-moz-border-radius:72px 1px 1px 72px/36px 36px 0px 0px;-o-border-radius:72px 1px 1px 72px/36px 36px 0px 0px;}





Le carré en quart bas gauche
.carrer12{position: absolute; width: 40px; height: 40px; background: #ff9999; -webkit-border-radius:72px 1px 1px 72px/0px 0px 36px 36px;border-radius:90% 1% 1% 90% / 1% 1% 90% 90%;-moz-border-radius:72px 1px 1px 72px/0px 0px 36px 36px;-o-border-radius:72px 1px 1px 72px/0px 0px 36px 36px;}





Le carré en quart haut droit
.carrer13{position: absolute; width: 40px; height: 40px; background: #ff9999; -webkit-border-radius:1px 72px 1px 72px/36px 36px 0px 0px;border-radius:1% 90% 1% 90% / 90% 90% 1% 1%;-moz-border-radius:1px 72px 1px 72px/36px 36px 0px 0px;-o-border-radius:1px 72px 1px 72px/36px 36px 0px 0px;}





Le carré en quart bas droit
.carrer14{position: absolute; width: 40px; height: 40px; background: #ff9999; -webkit-border-radius:1px 72px 72px 1px/0px 0px 36px 36px; border-radius:1% 90% 90% 1% / 1% 1% 90% 90%;-moz-border-radius:1px 72px 72px 1px/0px 0px 36px 36px;-o-border-radius:1px 72px 72px 1px/0px 0px 36px 36px;}





Le carré pointe droite
.carrer15{position: absolute; width: 40px; height: 40px; background: #ff9999; -webkit-border-radius:1px 72px 72px 1px/0px 36px 36px 36px; border-radius:1% 90% 90% 1% / 1% 90% 90% 90%;-moz-border-radius:1px 72px 72px 1px/0px 36px 36px 36px;-o-border-radius:1px 72px 72px 1px/0px 36px 36px 36px;}





Le carré à pointes descendantes
.carrer16{position: absolute; width: 40px; height: 40px; background: #ff9999; -webkit-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;border-radius:1% 90% 1% 90% / 90% 90% 1% 90%;-moz-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;-o-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;}





Le carré à pointes descendantes en manipulation d'héritage
.carrer16{position: absolute; width: 40px; height: 40px; background: #ff9999; -webkit-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;border-radius:1% 90% 1% 90% / 90% 90% 1% 90%;-moz-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;-o-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;}
    <div class="carrer16" style="margin-left: 50px; background: yellow;">
    <div class="carrer16" style="margin-left: 40px;margin-top: 40px; background: yellow;">
    <div class="carrer16 tourne90" style="margin-left: 0px;margin-top: -40px;">
    <div class="carrer16" style="margin-left: 40px; margin-top: 40px;"></div></div></div></div>

Nous remarquons ici que l'angle du quatrième dessin de la forme, est héritée de troisième dessin.
De fait nous devons entrer la valeur de margin-left dans margin-top et inverse puisqu'il y a un angle de 90°
pour obtenir une variation d'angle constant sur la même forme, il suffit de l'écrire qu'une fois dans le premier div, et de le mettre en héritage dans toutes les répétitions de la même forme ou autres formes désirées.








Le carré flotant
.carrer17{position: absolute; width: 40px; height: 40px; background: #ff9999; -webkit-border-radius:50px 25px 50px 25px/25px 95px 25px 95px;border-radius:50% 25% 50% 25% / 25% 95% 25% 95%;-moz-border-radius:50px 25px 50px 25px/25px 95px 25px 95px;-o-border-radius:50px 25px 50px 25px/25px 95px 25px 95px;}





Le bord bas du carré flotant
.bordcarrer17{position: absolute; width: 40px; height: 40px; border: 0px; border-bottom: 5px solid #ff9999; -webkit-border-radius:50px 25px 50px 25px/25px 95px 25px 95px;border-radius:50% 25% 50% 25% / 25% 95% 25% 95%;-moz-border-radius:50px 25px 50px 25px/25px 95px 25px 95px;-o-border-radius:50px 25px 50px 25px/25px 95px 25px 95px;}





Le bord haut du carré flotant
.bord2carrer17{position: absolute; width: 40px; height: 40px; border: 0px; border-top: 20px solid #ff9999; -webkit-border-radius:50px 25px 50px 25px/25px 95px 25px 95px;border-radius:50% 25% 50% 25% / 25% 95% 25% 95%;-moz-border-radius:50px 25px 50px 25px/25px 95px 25px 95px;-o-border-radius:50px 25px 50px 25px/25px 95px 25px 95px;}





Dessiner une feuille
.carrer18{position: absolute; width: 40px; height: 40px; background: #ff9999; -webkit-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;border-radius:1% 90% 60% 90% / 1% 90% 90% 90%;-moz-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;-o-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;}





Le bord gauche du carré flottant extrapolé pour forme trapèze, triangle, particulière construite sur les effets du carré ..
.bord3carrer17{position: absolute; width: 40px; height: 40px; border: 0px; border-left: 300px solid #ff9999; -webkit-border-radius:50px 25px 50px 25px/25px 95px 25px 95px;border-radius:50% 25% 50% 25% / 25% 95% 25% 95%;-moz-border-radius:50px 25px 50px 25px/25px 95px 25px 95px;-o-border-radius:50px 25px 50px 25px/25px 95px 25px 95px;}







Le carré en forme de cercle extrapolé en forme de demi cercle selon le bord choisit nous obtenoms le sens du demi-rond
.carrer8extra{position: absolute; width: 40px; height: 40px; border: 0px; border-left: 20px solid #ff9999; -webkit-border-radius:40px 40px 40px 40px/40px 40px 40px 40px; border-radius:40px 40px 40px 40px/40px 40px 40px 40px;-moz-border-radius:40px 40px 40px 40px/40px 40px 40px 40px;-o-border-radius:40px 40px 40px 40px/40px 40px 40px 40px;}







Le carré en forme de cone
.carrer19{position: absolute; border-color: #ff9999 transparent transparent; border-style: solid; border-width: 160px 24px 0px; height: 0; position: absolute; margin-left: 10px; margin-top: 30px; width: 34px;}







Le carré 20
.carrer20{position: absolute; width: 20px; height: 60px; background: #ff9999; -webkit-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;border-radius:1% 90% 1% 90% / 90% 60% 90% 60%;-moz-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;-o-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;}







Le carré en spirale
.carrer21{position: absolute; width: 80px; height: 40px; border: 5px solid black; -webkit-border-radius:80px 80px 80px 80px/40px 40px 40px 40px; border-radius:80px 80px 80px 80px/40px 40px 40px 40px;-moz-border-radius:80px 80px 80px 80px/40px 40px 40px 40px;-o-border-radius:80px 80px 80px 80px/40px 40px 40px 40px;}


    <div class="carrer21" style="margin-left:0px ; margin-top:initial;"></div>
    <div class="carrer21" style="margin-left:0px ; margin-top:10px;"></div>
    <div class="carrer21" style="margin-left:0px ; margin-top:20px;"></div>
    <div class="carrer21" style="margin-left:0px ; margin-top:30px;"></div>
    <div class="carrer21" style="margin-left:0px ; margin-top:40px;"></div>
    <div class="carrer21" style="margin-left:0px ; margin-top:50px;"></div>
    <div class="carrer21" style="margin-left:0px ; margin-top:60px;"></div>
    <div class="carrer21" style="margin-left:0px ; margin-top:70px;"></div>
    <div class="carrer21" style="margin-left:0px ; margin-top:80px;"></div>
    <div class="carrer21" style="margin-left:0px ; margin-top:90px;"></div>











Le carré en echo
.carrer22{position: absolute; border-color: transparent #ff9999 transparent; border-style: solid; border-width: 100px 24px 0px; height: 0; position: absolute; margin-left: 10px; margin-top: 30px; width: 34px;}









Le carré en noeux papillon
.carrer23{position: absolute; border-color: transparent blue transparent; border-style: solid; border-width: 60px 60px 60px; height: 0; position: absolute; margin-left: 10px; margin-top: 30px; width: 0px;}









Le carré en fanion
.carrer24{position: absolute; border-color: #ff9999 transparent transparent #ff9999; border-style: solid; border-width: 20px 0px 60px 60px; height: 34; position: absolute; margin-left: 10px; margin-top: 30px; width: 74px;}









Le carré en forme d'oeuf
.carrer25{position: absolute; display:block; width: 50px; height: 100px; background-color: yellow; -webkit-border-radius: 25px 25px 25px 25px / 60px 60px 40px 40px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;}









Le carré en forme de cloche
.carrer26{position: absolute; display:block; width: 50px; height: 100px; background-color: #666699; -webkit-border-radius: 25px 25px 25px 25px / 90px 90px 20px 20px; border-radius:50% 50% 50% 50% / 90% 90% 20% 20%;}









Le carré en forme de balle ou doigt pour l'ongle reprendre la même forme en plus petit au bout
.carrer27{position: absolute; width: 30px; height: 100px; background-color: #ff9900; -webkit-border-radius: 25px 25px 25px 25px / 90px 90px 20px 20px; border-radius:100% 100% 100% 100% / 90% 90% 20% 20%;}









Résumé : trait, carré, rectangle, trapèze sont de même famille et se détermine avec les valeurs

Des carrés, de l'opacité, de la géométrie des carrés issue du mixe des couleurs en css.

Le carré en croissant de lune
.carrer8{position: absolute; width: 40px; height: 40px; background: #ff9999; -webkit-border-radius:40px 40px 40px 40px/40px 40px 40px 40px; border-radius:40px 40px 40px 40px/40px 40px 40px 40px;-moz-border-radius:40px 40px 40px 40px/40px 40px 40px 40px;-o-border-radius:40px 40px 40px 40px/40px 40px 40px 40px;}


Le carré en croissant de lune est, un carré rond pour la lune, et un autre carré rond plus grand qui vient masquer une partie comme le fait la terre.

    <div class="carrer8" style="margin-left: 50px;">
    < class="carrer8" style="margin-left: 15px; background: white;">
    </div></div>




Le carré à pointes descendantes en manipulation d'héritage
.carrer16{position: absolute; width: 40px; height: 40px; background: #ff9999; -webkit-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;border-radius:1% 90% 1% 90% / 90% 90% 1% 90%;-moz-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;-o-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;}
    <div class="carrer16" style="margin-left: 50px; background: yellow;opacity:0.4;">
    <div class="carrer16 tourne45" style="margin-left: 20px;margin-top: -7px;background: blue;opacity:0.4;">
    <div class="carrer16 tourne45" style="margin-left: 20px;margin-top: -7px;background: green;opacity:0.4;">
    <div class="carrer16 tourne45" style="margin-left: 20px;margin-top: -7px;background: red;opacity:0.4;">
</div></div></div></div>












Le carré à pointes descendantes sans héritage
.carrer16{position: absolute; width: 40px; height: 40px; background: #ff9999; -webkit-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;border-radius:1% 90% 1% 90% / 90% 90% 1% 90%;-moz-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;-o-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;}
    <div class="carrer16 tourne45" style="margin-left: 70px;margin-top: -7px;background: blue;opacity:0.4;"></div>
    <div class="carrer16 tourne90" style="margin-left: 90px;margin-top: -7px;background: green;opacity:0.4;"></div>
    <div class="carrer16 tourne135" style="margin-left: 43px;margin-top: 20px;background: red;opacity:0.4;"></div>
    <div class="carrer16 tourne135" style="margin-left: 93px;margin-top: 20px;background: red;opacity:0.4;"></div>
    <div class="carrer16" style="margin-left: 50px; background: yellow;opacity:0.4;"></div>












Dessiner une feuille en dégrader
.carrer18{position: absolute; width: 40px; height: 40px; background: #ff9999; -webkit-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;border-radius:1% 90% 60% 90% / 1% 90% 90% 90%;-moz-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;-o-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;}
.claireavert { background: #009933; background: -webkit-linear-gradient(#00ff00, #009933); background: -o-linear-gradient(#00ff00, #009933); background: -moz-linear-gradient(#00ff00, #009933); background: linear-gradient(#00ff00, #009933); }





Pour dessiner une feuille en dégrader horizontal, il suffit d'ajouter le symbole left devant la référence des couleurs
.carrer18{position: absolute; width: 40px; height: 40px; background: #ff9999; -webkit-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;border-radius:1% 90% 60% 90% / 1% 90% 90% 90%;-moz-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;-o-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;}
.claireavert1 { background: #009933; background: -webkit-linear-gradient(left,#00ff00, #009933); background: -o-linear-gradient(left,#00ff00, #009933); background: -moz-linear-gradient(left,#00ff00, #009933); background: linear-gradient(left,#00ff00, #009933); }