Maison > interface Web > tutoriel CSS > le corps du texte

Dessinez des graphiques de base en utilisant CSS3

不言
Libérer: 2018-06-14 16:52:07
original
1668 Les gens l'ont consulté

Cet article présente principalement les graphiques de base du dessin CSS3, des informations pertinentes sur les cercles, les ovales, les triangles, etc. Les amis dans le besoin peuvent se référer à

Cercles CSS3

#css3-circle{
 width: 150px;
 height: 150px;
 border-radius: 50%;
 background-color: #232323;}
Copier après la connexion

CSS3 Ellipse

#css3-elipse{
 width: 200px;
 height: 100px;
 border-radius: 50%;
 background-color: #232323;}
Copier après la connexion

Triangle CSS3

#css3-triangle{
 width: 0;
 height: 0;
 border-left: 100px solid transparent;
 border-right: 100px solid transparent;
 border-bottom: 150px solid #232323;}
Copier après la connexion

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);
}
Copier après la connexion

Trapèze CSS3

#css3-trapezoid{
 width: 100px;
 height: 0;
 border-bottom: 100px solid #232323;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
}
Copier après la connexion

Hexagramme 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;
}
Copier après la connexion

Pentagone 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: '';
}
Copier après la connexion

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;}
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; }
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%;
}
Copier après la connexion

Possins CSS3

#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;
}
Copier après la connexion

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Utiliser l'icône polices pour aider CSS dans le traitement des images

L'utilisation des ombres de calque CSS3 et des ombres de texte

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal