Comment dessiner un cercle en CSS3

Comment implémenter le dessin de cercle CSS3 : créez d'abord un exemple de fichier HTML ; puis définissez un div et nommez-le "circle" ; enfin, utilisez l'attribut CSS "border-radius" pour que le div obtienne l'effet de cercle ; .

L'environnement d'exploitation de ce tutoriel : ordinateur Dell G3, système Windows 7, version HTML5&&CSS3.

Recommandé : "Tutoriel vidéo CSS"

Le CSS est devenu de plus en plus puissant. Vous pouvez l'utiliser pour dessiner diverses formes simples et les afficher à la place des images. le partage utilise principalement le dessin de cercles et de secteurs.

Pour réaliser un cercle

<div class="circle"></div>
<style>
.circle {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  background: #666;
}
</style>

l'effet est le suivant :

Les quatre valeurs de border-radius les coins arrondis sont pris dans l'ordre. Ils sont : supérieur gauche, supérieur droit, inférieur droit, inférieur gauche. Une seule valeur est définie ici, ce qui signifie que les quatre coins sont tous à 50%

Principe :

border-radius : 50% Pliez la bordure de l'élément pour créer un cercle.

Étant donné que les cercles ont le même rayon en tout point donné, la largeur et la hauteur doivent avoir la même valeur. Différentes valeurs créeront une ellipse.

Obtenir une forme d'éventail

Utilisez le rayon de bordure pour réaliser une forme d'éventail à 90 degrés :

<div class="sector"></div>
<style>
.sector{
  border-radius:80px 0 0;
  width: 80px;
  height: 80px;
  background: #666;
}
</style>

L'effet est le suivant :

Principe :

Le coin supérieur gauche est un coin arrondi, et les trois autres coins sont des angles droits : la valeur du coin supérieur gauche est la même que la largeur et la hauteur, et les valeurs des trois autres coins restent inchangées (égales à 0).

Dessinez un secteur sous n'importe quel angle

L'effet est le suivant :

/Dessinez un secteur à 60 degrés/

/Dessiner un secteur à 85 degrés/

/dessine un secteur à droite, un secteur à 90 degrés/

/* dessine un secteur de couleur*/

/*Dessine un angle en demi-cercle de différentes couleurs*/

Le code complet est le suivant suit :

<div class="shanxing shanxing1">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<!--*绘制一个85度扇形*/--p>
<div class="shanxing shanxing2">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<!--*绘制一个向右扇形，90度扇形*-->
<div class="shanxing shanxing3">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<!--*绘制一个颜色扇形 */--p>
<div class="shanxing shanxing4">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<!--/*绘制一个不同颜色半圆夹角 */-->
<div class="shanxing shanxing5">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<style>
.shanxing{
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 100px;
    background-color: yellow;
}
.sx1{
    position: absolute;
    width: 200px;
    height: 200px;
    transform: rotate(0deg);
    clip: rect(0px,100px,200px,0px);/*这个clip属性用来绘制半圆，在clip的rect范围内的内容显示出来，
     使用clip属性，元素必须是absolute的 */
     
    border-radius: 100px;
    background-color: #f00;
    /*-webkit-animation: an1 2s infinite linear; */
}
.sx2{
    position: absolute;
    width: 200px;
    height: 200px;
    transform: rotate(0deg);
    clip: rect(0px,100px,200px,0px);
    border-radius: 100px;
    background-color: #f00;
    /*-webkit-animation: an2 2s infinite linear;*/
}
/*绘制一个60度扇形*/
.shanxing1 .sx1{transform: rotate(-30deg);}
.shanxing1 .sx2{transform: rotate(-150deg);}
/*绘制一个85度扇形*/
.shanxing2 .sx1{transform: rotate(-45deg);}
.shanxing2 .sx2{transform: rotate(-140deg);}
/*绘制一个向右扇形，90度扇形*/
.shanxing3 .sx1{transform: rotate(45deg);}
.shanxing3 .sx2{transform: rotate(-45deg);}
/*绘制一个颜色扇形 */
.shanxing4 .sx1{transform: rotate(45deg);background-color: #fff;}
.shanxing4 .sx2{transform: rotate(-45deg);background-color: #fff;}
/*绘制一个不同颜色半圆夹角 */
.shanxing5 .sx1{transform: rotate(45deg);background-color: #f00;}
.shanxing5 .sx2{transform: rotate(-45deg);background-color: #0f0;       
</style>

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!