width veut dire la largeur
height veut dire la hauteur
background veut dire le fond
border veut dire le bord
Le trait droit de crayon plein
.trait { width: 100px; height: 2px; background: black; }
Le trait droit de crayon plein
.trait1 { width: 100px; height: 6px; background: black; -webkit-border-radius: 50px 50px 50px 50px / 20px 20px 90px 90px; border-radius: 50% 50% 50% 50% / 20% 20% 90% 90%;}
pour dessiner un cercle il suffit de dessiner un carré auquel on ajoute border-radius:50%;
.cercle { width: 20px; height: 20px; background: black; border-radius:50%;}
Le coup de crayon s'obtient en dessinant une forme, puis on dit n'affiche pas les bords sans donner de couleur de fond.
Ensuite, ont dit affiche ce coté en le mettant en forme.
En exemple :
.montrait{ width: 40px; height: 15px; border: 0px; border-bottom: 2.5px solid black; border-top-left-radius:4px; border-top-right-radius:4px; border-bottom-right-radius:40px; border-bottom-left-radius:40px; }
Une rotation est une suite de variation d'angle, celle-ci peut être constante ou variable, accompagné d'une translation pour créer les spirales.
.tourne15 { float: left; -ms-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg);}
.tourne30 { float: left; -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg);}
.tourne45 { float: left; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.tourne60 { float: left; -ms-transform: rotate(60deg); -webkit-transform: rotate(60deg); transform: rotate(60deg);}
.tourne75 { float: left; -ms-transform: rotate(75deg); -webkit-transform: rotate(75deg); transform: rotate(75deg);}
.tourne90 { float: left; -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);}
.tourne105 { float: left; -ms-transform: rotate(105deg); -webkit-transform: rotate(105deg); transform: rotate(105deg);}
.tourne120 { float: left; -ms-transform: rotate(120deg); -webkit-transform: rotate(120deg); transform: rotate(120deg);}
.tourne135 { float: left; -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg);}
.tourne150 { float: left; -ms-transform: rotate(150deg); -webkit-transform: rotate(150deg); transform: rotate(150deg);}
.tourne165 { float: left; -ms-transform: rotate(165deg); -webkit-transform: rotate(165deg); transform: rotate(165deg);}
.tourne180 { float: left; -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg);}
.tourne195 { float: left; -ms-transform: rotate(195deg); -webkit-transform: rotate(195deg); transform: rotate(195deg);}
.tourne210 { float: left; -ms-transform: rotate(210deg); -webkit-transform: rotate(210deg); transform: rotate(210deg);}
.tourne225 { float: left; -ms-transform: rotate(225deg); -webkit-transform: rotate(225deg); transform: rotate(225deg);}
.tourne240 { float: left; -ms-transform: rotate(240deg); -webkit-transform: rotate(240deg); transform: rotate(240deg);}
.tourne255 { float: left; -ms-transform: rotate(255deg); -webkit-transform: rotate(255deg); transform: rotate(255deg);}
.tourne270 { float: left; -ms-transform: rotate(270deg); -webkit-transform: rotate(270deg); transform: rotate(270deg);}
.tourne285 { float: left; -ms-transform: rotate(285deg); -webkit-transform: rotate(285deg); transform: rotate(285deg);}
.tourne300 { float: left; -ms-transform: rotate(300deg); -webkit-transform: rotate(300deg); transform: rotate(300deg);}
.tourne315 { float: left; -ms-transform: rotate(315deg); -webkit-transform: rotate(315deg); transform: rotate(315deg);}
.tourne330 { float: left; -ms-transform: rotate(330deg); -webkit-transform: rotate(330deg); transform: rotate(330deg);}
.tourne345 { float: left; -ms-transform: rotate(345deg); -webkit-transform: rotate(345deg); transform: rotate(345deg);}