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

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:

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:

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!