Drawing circular shapes in CSS is hard, since the only way to do so is by using
border-radius: 50%, which only gets you so far - in particular when you’re trying to draw arcs. It’s tempting to resort to SVG, but that brings with it scaling trickery which we can avoid by sticking with pure HTML. In this tutorial, we’ll show you a trick to draw a circular progress arc using
What we’re going to make
We’ll be using several skewed rectangles to create our arc - more on that in a bit - and we’ll need a circle to clip them with. Let’s start off by creating a circule using the old
border-radius:50% to round a
div. We’ll add
overflow:hidden to the circle to have it clip any elements we place within it.
We can now use a rectangle to represent a quarter-circle segment. We place the rectangle’s top-left corner in the center of the circle, and make it very large so the we can be sure that the circle clips it:
Interestingly, this rectangle is all we need to draw a segment anywhere between 0° and 90° in size. We can apply a
skew transformation to it to squeeze it from 90° (unskewed) all the way to 0° (skewed to a line). Of course a single segment of at most 90° is not enough to represent a full circule, but we can simply create four copies of this rectangle and rotate them so that we can cover 360°. Here are several rectangles in differents positions and with different degrees of skewing:
With four copies of the rectangle, rotated by 0°, 90°, 180° and 270°, we can cover a complete circle. That way, we can set their skew degrees individually and draw any arc from 0° to 360°
By overlaying a smaller inner circle on the main circle, we can turn our circle into an arc, and we’ll have a place to print the progress value.
The endings of the arc line can be rounded by creating small dots (
div elements with our friend
border-radius:50%, again) and placing them exactly where the line starts and ends.