Conseils CSS3 pour dessiner divers graphiques de base

CSS3 est une version améliorée de la technologie CSS, et le développement du langage CSS3 évolue vers la modularité. La spécification précédente était trop volumineuse et complexe en tant que module, elle a donc été divisée en modules plus petits et davantage de nouveaux modules ont été ajoutés. Ces modules incluent : modèle de boîte, module de liste, méthode de lien hypertexte, module de langue, arrière-plan et bordure, effets de texte, mise en page multi-colonnes, etc. Ci-dessous, nous partagerons avec vous quelques tutoriels sur l'utilisation de CSS3 pour créer des graphiques simples.

Cercle CSS3

#css3-circle{
 width: 150px;
 height: 150px;
 border-radius: 50%;
 background-color: #232323;}

Ovale CSS3

#css3-elipse{
 width: 200px;
 height: 100px;
 border-radius: 50%;
 background-color: #232323;}

Triangle CSS3

#css3-triangle{
 width: 0;
 height: 0;
 border-left: 100px solid transparent;
 border-right: 100px solid transparent;
 border-bottom: 150px solid #232323;}

Parallélogramme CSS3

#css3-parallelogram{
 width: 200px;
 height: 100px;
 background: #232323;
 -webkit-transform: skew(-45deg); -moz-transform: skew(-45deg); -o-transform: skew(-45deg);
 transform: skew(-45deg);
}

Trapèze CSS3

#css3-trapezoid{
 width: 100px;
 height: 0;
 border-bottom: 100px solid #232323;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
}

Étoile hexagonale CSS3

#css3-six-star{
 width: 0;
 height: 0;
 position: relative;
 border-bottom: 100px solid #232323;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
}#css3-six-star:after{
 content: "";
 width: 0;
 height: 0;
 position: absolute;
 left: -50px;
 top: 35px;
 border-top: 100px solid #232323;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
}

Étoile à cinq branches CSS3

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

Pentagone CSS3

#css3-pentagon {
 position: relative;
 width: 54px;
 border-width: 50px 18px 0;
 border-style: solid; 
 border-color: #232323 transparent;}#css3-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 #232323;}

Hexagone CSS3

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

Coeur CSS3

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

CSS3 Bagua

#css3-gossip {
 width: 96px;
 height: 48px;
 background: #f1f1f1;
 border-color: #232323;
 border-style: solid;
 border-width: 2px 2px 50px 2px;
 border-radius: 100%;
 position: relative;
}#css3-gossip:before{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  background: #f1f1f1;
  border: 18px solid #232323;
  border-radius: 100%;
  width: 12px;
  height: 12px;
}#css3-gossip:after {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 background: #232323;
 border: 18px solid #f1f1f1;
 border-radius:100%;
 width: 12px;
 height: 12px;
}

Ce ci-dessus sont les petits graphiques de base complétés avec CSS3. L'avez-vous appris ?

Tutoriels associés :

Tutoriel de dessin graphique simple CSS3

Implémentation d'une trajectoire de mouvement circulaire dans une animation CSS3

Comment obtenir un effet d'horloge avec CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!