Maison  >  Article  >  interface Web  >  Comment dessiner un cercle en CSS3

Comment dessiner un cercle en CSS3

藏色散人
藏色散人original
2020-12-30 09:40:375816parcourir

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 ; .

Comment dessiner un cercle en CSS3

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 :

Comment dessiner un cercle en CSS3

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 :

Comment dessiner un cercle en CSS3

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/

Comment dessiner un cercle en CSS3

/Dessiner un secteur à 85 degrés/

Comment dessiner un cercle en CSS3

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

Comment dessiner un cercle en CSS3

/* dessine un secteur de couleur*/

Comment dessiner un cercle en CSS3

/*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!

Déclaration:
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