When You Need To Make a Triangle, Think Conic Gradients 관련

CSS > Article(s)

---

Article(s)

• There are Many Other Ways To Make Triangles

---

When You Need To Make a Triangle, Think Conic Gradients

Certainly it isn't the *only* way, but you've got a lot of angular control with conic-gradient() and it's fun to work with.

It took me a while to get it, but conic-gradient() in CSS is actually pretty useful. For a while I was like, how many times do you actually need a this color-picker ass look?

See Conic OKLCH rainbow by editor/chriscoyier on CodePen.

Not very often.

There is a clearer use case when you set hard stops for the colors.

See Conic Gradient Pie Chart by editor/chriscoyier on CodePen.

Pie charts are cool, but honestly, you’re probably better off with <svg> so you have individual elements for interactivity and accessibility information and such. Backgrounds in CSS are generally decoration-only.

My brain changed a little when I thought about how you can move where the center of the conic gradient is, though. Here I’ll put the origin at the bottom left corner (but a little further away from it, just for fun, and I can burst out some rays!

See Burst with repeating-conic-gradient by editor/chriscoyier on CodePen.

I also like how an actual gradient looks (chriscoyier) across a button.

I was thinking about this when I saw this screenshot of Studio Heyday on Siteinspire.

What are those big beautiful triangles but conic gradients with hard stops at that angle?

We can set up a syntax where we “start” at the top-left corner point horizontally. By “point horizontally” I mean instead of the great wand of conic gradient painting starting like a clock hand poinging at 12 noon, we start pointing at 3 o’clock.

background: conic-gradient(
  /* start in the upper left pointing at 3 o'clock */
  from 0.25turn at 0 0,
  green 0 45deg,
  white 45deg 
);

Then we set our color stops in degrees, which is sometimes easier to think about when dealing in circular stuff.

See Triangle with conic gradient by editor/chriscoyier on CodePen.

But Chris! (you say). I don’t need a conic-gradient() for this, this is simple an angled linear-gradient()! You’re correct of course. That’s easy enough to do as well. But I quite like how we’re dealing with angles here, as since we’re specifically thinking about triangles, we can think in degrees. And if we’re confined into a box and the color angle is < 45deg, that’s just a lot of triangular control I’d say.

When I set out to build something like the Studio Hey nav triangles, this is the approach I took. I figured if I had triangular control like this, I could also alter the angles on hover, and I used a little linear() easing to make them jiggle a bit.

See Triangles with conic-gradient() by editor/team/codepen on CodePen.

---

There are Many Other Ways To Make Triangles

• There’s the classic technique (chriscoyier) using just one of four borders on a zero-dimensions box.
• You can clip one out with clip-path: polygon();
• You could use the brand new border-shape.
• You could draw one in SVG with <polygon>
• You could draw on on an <canvas> with .lineTo() and such
• You could use some kind of skew transform and get a triangular side and then hide the overflow or something.

Honestly there is probably a dozen more ways if you sat down and figured them all out!

When You Need To Make a Triangle, Think Conic Gradients

---

Certainly it isn't the *only* way, but you've got a lot of angular control with conic-gradient() and it's fun to work with.