This is the third post in a series about the new CSS shape() function. We’ve learned about drawing lines and arcs, and now I’ll introduce the curve command, essential for mastering the shape() function. While there are more commands, they’re rarely needed and can be learned later through documentation.

The curve command

This command adds a Bézier curve between two points using control points. You can use one control point for a Quadratic curve or two for a Cubic curve.

Bézier, Quadratic, Cubic, control points? What?!

These terms might seem unclear or irrelevant unless your work involves creating shapes and you have a geometry background.

We have cubic-bezier() for animations, but understanding it is complex. We often use a generator or quickly forget explanations. (Here’s one!)

This article focuses on practical examples, like rounding corners of irregular shapes. Here’s a figure showing Bézier curves.

Comparing two curved lines, one with one control point and one with two control points.

The blue dots are the start and end points (A and B), and the black dots are control points. The curve is tangent to the red dashed lines.

We’ll consider one control point. The syntax follows this pattern:

clip-path: shape(
  from Xa Ya, 
  curve to Xb Yb with Xc Yc
);

arc command vs. curve command

In Parts 1 and 2, we saw the arc command for rounded edges, but it doesn’t cover all cases. You’ll need the curve command. When to use each? It depends. Try arc first; if not possible, use curve.

Some shapes can use both commands for similar results, helping understand the curve command.

Example:

First shape code:

.shape {
  clip-path: shape(from 0 0,
    arc to 100% 100% of 100% cw,
    line to 0 100%)
}

Second shape code:

.shape {
  clip-path: shape(from 0 0,
    curve to 100% 100% with 100% 0,
    line to 0 100%)
}

The arc command uses a radius (100%), while curve uses a control point (100% 0).

Two rounded shapes that appear to have similar curves, one using an arc and another using a curve.

Both results aren’t identical. The arc creates a quarter-circle; the curve differs slightly. Overlaying them shows the difference.

You can round corners using either arc or curve, with different results. Which is better? It depends on your visual preference and shape.

In Part 1, we created rounded tabs with arc

Discover more from WIREDGORILLA

Subscribe to get the latest posts sent to your email.

Similar Posts