Improved CSS Shapes with shape() — Part 2: Exploring Arcs

Ready for the second part? We’re still delving into the shape() function, specifically the arc command. I hope you reviewed the first part because we’ll dive right into creating more shapes!

Remember, the shape() function is only supported in Chrome 137+ and Safari 18.4+ as of May 2025.

Sector shape

A classic shape for pie-like charts.

We have one arc and two fixed points, with one moving based on the sector’s fill.

The code looks like this:

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

We define a variable to control the sector’s fill, ranging from 0 to 100. To draw, start from the top, create an arc to (X, Y), then move to the center.

Can we use keywords like top and center?

Yes! Unlike polygon(), we have keywords like top, bottom, left, etc., similar to background-position. It simplifies reading your shape.

The arc’s radius should be 50%. With a square element, the sector fills the whole element, so the radius equals half the width (or height).¹

The point is placed within that circle, dependent on the V value. No math lesson needed, here’s the formula for X and Y:

X = 50% + 50% * sin(V * 3.6deg)
Y = 50% - 50% * cos(V * 3.6deg)

Our code becomes:

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

The result isn’t right, but there’s no code error. What’s missing?

It’s the arc’s size and direction!

Remember the last article’s advice? Troubles arise with them, but testing combinations can fix it. Here, we use: small cw.

Better! Let’s try more values and observe the shape’s behavior:

Oops, some values work, others don’t. The direction should be clockwise, but perhaps large