How to draw a circle in css3

How to achieve css3 circle drawing: first create an HTML sample file; then define a div and name it "circle"; finally, use the css attribute "border-radius" to make the div achieve the circle effect.

The operating environment of this tutorial: Dell G3 computer, Windows 7 system, HTML5&&CSS3 version.

Recommendation: "css Video Tutorial"

css has become more and more powerful. You can use it to draw various simple shapes and display them instead of pictures. This sharing mainly uses drawing circles and sectors.

Realizing a circle

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

The effect is as follows:

border-radiusThe four values ​​​​of the rounded corners are taken in order They are: upper left, upper right, lower right, lower left. Only one value is set here, which means that the values ​​of the four corners are all 50%

Principle:

border-radius: 50% Bend the border of the element to create a circle.

Since a circle has the same radius at any given point, both width and height need to be the same value. Different values ​​will create an ellipse.

Realize fan shape

Use border-radius to realize a 90-degree fan shape:

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

The effect is as follows:

Principle:

The upper left corner is a rounded corner, and the other three corners are right angles: the value of the upper left corner is the same as the width and height, and the values ​​of the other three corners remain unchanged (equal to 0).

Draw a sector at any angle

The effect is as follows:

/Draw a 60-degree sector/

/Draw An 85-degree sector/

/draws a sector to the right, and a 90-degree sector/

/*draws a sector Color sector*/

/*Draw a semicircle angle of different colors*/

The complete code is as follows:

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

The above is the detailed content of How to draw a circle in css3. For more information, please follow other related articles on the PHP Chinese website!