Eager for the next installment? We're still diving into the shape() function, specifically focusing on the arc command. If you've absorbed the first part, we'll dive right into constructing more intricate shapes!

For reference, the shape() function is supported in Chrome 137 and Safari 18.4 as of May 2025.

Sector Shape

This shape is often seen in pie charts.

Clearly, we have one arc here. There are two fixed points and one that shifts depending on how full the sector is.

The code looks like this:

<code>.sector {
  --v: 35; /* [0 100]*/
<p>aspect-ratio: 1;
clip-path: shape(from top, arc to X Y of R, line to center);
}</p></code>

We set a variable controlling the sector's fill level, ranging from 0 to 100. To draw the shape, we begin at the top, create an arc to the point (X, Y), and then move to the center.

Can we use keyword values like top and center?

Absolutely! Unlike the polygon() function, the shape() function supports keywords for typical cases such as top, bottom, left, etc., similar to background-position. No need for detailed explanation, but knowing this makes reading your shape code easier.

The arc's radius should be 50%. For a square element, the sector, being part of a circle, needs to fill the entire element, so the radius equals half the width (or height).¹

The point lies within this circle, and its location depends on the V value. No boring math details, here’s the formula for X and Y:

<code>X = 50%   50% <em> sin(V </em> 3.6deg)
Y = 50% - 50% <em> cos(V </em> 3.6deg)</code>

Our code transforms into:

<code>.sector {
--v: 35; /<em> [0 100] </em>/<p>aspect-ratio: 1;
clip-path: shape(from top,
arc to calc(50%   50% <em> sin(var(--v) </em> 3.6deg)) 
calc(50% - 50% <em> cos(var(--v) </em> 3.6deg)) of 50%,
line to center);
}</p></code>

Hmm, the result isn't ideal, but there are no coding errors. Can you spot what's missing?

It's the size and direction of the arc!

Recall my advice from the last article? These will always pose challenges, but trying different combinations usually resolves them. For us, we need: small cw.

Better! Let’s experiment with more values to observe the shape's behavior:

Oops, some values work well, but others don’t. The direction should be clockwise, but perhaps we should use large instead of small? Let’s try:

Still not working. The problem arises because we're moving one arc point based on the V value, creating a different configuration for the arc command.

Here's an interactive demo for better visualization:

When you adjust the value, notice how large cw always tries to follow the larger arc between the points, while small cw follows the smaller one. Small cw provides a good result when the value is below 50, but large cw works better when it's over 50.

I know, it’s tricky, and I chose this example to highlight how working with arcs can lead to many headaches. However, the more problems we encounter, the better we become at solving them.

The solution here is simple. Keep using large cw and add a border-radius to the element. If you examine the previous demo, you’ll see that even though large cw doesn't produce a perfect result, it fills the desired area. All we need to do is clip the excess space, and a simple border-radius: 50% accomplishes this!

I'm keeping the box-shadow in place so we can see the arc, but clearly, border-radius makes a significant difference in the main shape.

There’s one final edge case to address. When the value equals 100, both arc points have the same coordinates, which makes sense since the sector is full and forms a circle. However, when this happens, the arc does nothing by definition, and we won’t get a full circle.

To fix this, we can limit the value to, say, 99.99 to avoid reaching 100. It’s a bit of a hack, but it works.

<code>.sector {
--v: 35; /<em> [0 100]</em>/<p>--_v: min(99.99, var(--v));
aspect-ratio: 1;
clip-path: shape(from top,
arc to calc(50%   50% <em> sin(var(--_v) </em> 3.6deg)) 
calc(50% - 50% <em> cos(var(--_v) </em> 3.6deg)) of 50% large cw,
line to center);
border-radius: 50%;
}</p></code>

Now our shape is flawless! Don’t forget you can apply it to image elements too:

Arc Shape

Similar to the sector shape, we can create an arc shape. Since we’re working with the arc command, it’s essential to do this.

We already have half the code since it’s essentially a sector shape without the inner part. We just need to add commands to cut out the inner part.

<code>.arc {
--v: 35; 
--b: 30px;<p>--_v: min(99.99, var(--v));
aspect-ratio: 1;
clip-path: shape(from top,
arc to calc(50%   50% <em> sin(var(--_v) </em> 3.6deg)) 
calc(50% - 50% <em> cos(var(--_v) </em> 3.6deg)) of 50% cw large,</p>
<pre class="brush:php;toolbar:false"><code>line to calc(50%   (50% - var(--b)) * sin(var(--_v) * 3.6deg)) 
        calc(50% - (50% - var(--b)) * cos(var(--_v) * 3.6deg)),
arc to 50% var(--b) of calc(50% - var(--b)) large</code>

); border-radius: 50%; }

From the sector shape, we remove the line to center segment and replace it with another line command that moves to a point on the inner circle. If you compare its coordinates with the previous point, you’ll notice an offset equal to --b, which defines the arc’s thickness. Then we draw an arc in the opposite direction (ccw) until the point 50% var(--b), which is also an offset equal to --b from the top.

I haven’t specified the direction of the second arc since browsers will default to ccw.

Ah, the same issue we encountered with the sector shape rears its head again! Not all values yield good results due to the same reasoning we discussed earlier, and, as you can see, border-radius doesn’t solve it. This time, we need a way to conditionally adjust the arc’s size based on the value. It should be large when V exceeds 50, and small otherwise.

Conditions in CSS? Yes, they’re possible! First, let’s convert the V value like this:

<code>--_f: round(down, var(--_v), 50)</code>

The value is within the range [0 99.99] (remember, we don’t want to reach 100). We use round() to ensure it’s always a multiple of a specific value, which is 50 in our case. If the value is less than 50, the result is 0; otherwise, it’s 50.

There are only two possible values, so we can easily add a condition. If --_f equals 0, we use small; otherwise, we use large:

<code>
.arc {
--v: 35;
--b: 30px;<p>--_v: min(99.99, var(--v));
--_f: round(down,var(--_v), 50);
--_c: if(style(--_f: 0): small; else: large);
clip-path: shape(from top,
arc to calc(50%   50% <em> sin(var(--_v) </em> 3.6deg)) 
calc(50% - 50% <em> cos(var(--_v) </em> 3.6deg)) of 50% cw var(--_c),
line to calc(50%   (50% - var(--b)) <em> sin(var(--_v) </em> 3.6deg)) 
calc(50% - (50% - var(--b)) <em> cos(var(--_v) </em></p></code>

The above is the detailed content of Better CSS Shapes?Using shape() — Part 2: More on Arcs. For more information, please follow other related articles on the PHP Chinese website!