Draw an arc with CSS

Drawing Arcs with CSS

In web development, sometimes we need to draw some graphics on the page, and CSS can help us achieve this goal. This article will discuss in detail how to draw arcs using CSS.

1. Using the border-radius Property

In CSS, we can use the border-radius property to create rounded corners. By setting the value of the border-radius property, we can draw shapes such as circles and ellipses. Furthermore, we can use this property to draw arcs.

1.1 Drawing a Circle

To draw a complete circle, simply set the value of the border-radius property to 50%.

.circle {
width: 100px;
height: 100px;
background-color: orange;
border-radius: 50%;
}

<div class="circle"></div>

The above code will draw an orange circle with a radius of 50px on the page.

1.2 Drawing an Arc

To draw an arc, we can use the four values ​​of the border-radius property to control the size of the rounded corners. These represent the corner radius of the top-left, top-right, bottom-right, and bottom-left corners, respectively. Setting any of these values ​​to 0 will make the corresponding corner a right angle, forming an arc.

.arc {
width: 200px;
height: 100px;
background-color: orange;
border-radius: 50% 0 0 50%;
}

<div class="arc"></div>

The above code draws an arc on the page, consisting of the top-left and bottom-left corners.

2. Using the :before and :after pseudo-elements

In addition to using the border-radius property to draw an arc, we can also use the pseudo-elements :before and :after to achieve a similar effect.

.arc:before {
content: "";
width: 100px;
height: 100px;
display: block;
background-color: orange;
border-radius: 50% 0 0 50%;
} 

<div class="arc"></div> 

The above code will create a div element with an arc effect on the page.

3. Using SVG

In addition to CSS, we can also use SVG (Scalable Vector Graphics) to draw arcs. SVG is an XML-based vector graphics format used to describe two-dimensional graphics, particularly suitable for graphs and data visualization.

<svg width="200" height="100"> 
<path d="M 50 0 A 50 50 0 0 1 100 50 L 200 50 L 200 100 L 0 100 L 0 50 L 50 50 Z" fill="orange"></path> 
</svg> 

The above code uses the SVG <path> element to draw an arc. The size and position of the arc can be determined by adjusting the parameters of the A tag.

Conclusion

Through the above introduction, we can see that using the CSS border-radius property, pseudo-elements, and SVG, we can easily achieve the effect of drawing an arc on a web page. Each of these methods has its own advantages and disadvantages. You can choose the appropriate method based on your actual needs.