You need a triangle in the corner of a card. The old drill: border-top: 20px solid transparent, border-left: 20px solid red, a wrapper, some absolute positioning, and a comment apologising to future you. Or clip-path: polygon() and a mental picture of where the vertices land. Or an SVG.
Chris Coyier's take: reach for conic-gradient() first. Not because the gradient itself is clever. Because two hard color stops are.
What conic-gradient() is doing under the hood
A conic gradient sweeps a color transition around a center point. Left to its own devices it produces the familiar color-picker look, which Coyier notes you almost never actually need. You can point the sweep in a direction with from, move the pivot with at, and collapse the transition to zero width by giving two adjacent stops the same angle. Two hard stops, one wedge. That wedge is a triangle.
Here is the exact snippet from the piece. A green wedge from 0 to 45 degrees, starting from the "3 o'clock" direction, pivoting at the top-left corner:
background: conic-gradient(
/* start in the upper left pointing at 3 o'clock */
from 0.25turn at 0 0,
green 0 45deg,
white 45deg
);
Three things to read out of that. 0.25turn is 90 degrees written in turn units; CSS accepts both. at 0 0 moves the pivot to the top-left corner of the box, so the wedge fans out into the element instead of centering on the middle. And green 0 45deg followed by white 45deg is the hard-stop pattern: green owns everything from angle 0 to angle 45, and white takes over the instant we pass 45. No transition band. Clean edge.
Change 45deg and the triangle's angle changes. Change from and the whole thing rotates. Change at and the vertex slides around the box.
Where it wins over the usual triangle toolkit
Coyier lists the alternatives out loud: the border hack, clip-path: polygon(), the upcoming border-shape, SVG, canvas, transform: skew. They all work. Conic-gradient's edge is that thinking in angles gives you a knob the others don't.
An angle under 45 degrees is a slim triangle. An angle at 90 is a corner filler. Because the gradient lives on the background layer, you can compose it: a second conic in background-image, a background-color behind, and the triangle sits over its container without a wrapper element. Coyier also notes conic gradients can be transitioned, so the same knob is available at runtime.
One caveat straight from Coyier: pie charts are the obvious next move, and you should mostly not go there. A real pie chart wants labels, links, and hover targets, and SVG gives you elements to pin those to. A gradient is one background layer. Use conic for decoration; reach for SVG when the shape is data.
The mechanism worth remembering
Hard stops work in every gradient function — linear-gradient, radial-gradient, conic-gradient — for the same reason. Two color stops at the same position define a discontinuity, and CSS honors it. In linear-gradient that discontinuity is a straight line. In radial-gradient, a ring. In conic-gradient, a ray from the pivot. Rays from a pivot are triangle edges. That is the whole idea.
Try it on the next card
Open a box on a page you are working on. Pick a corner. Copy Coyier's snippet as-is: from 0.25turn at 0 0, green 0 45deg, white 45deg. That is a green triangle in the top-left with no extra element, and every number in it is a knob you can turn. The rest of the piece, ray bursts and animated wedges included, is the same recipe with different numbers. Two hard stops, a from, an at.
Top comments (0)