CSS Clip-Path Estrela

CSS clip-path star: drawing pentagrams, hexagrams and ninja stars

A star drawn with clip-path: polygon() is built from alternating outer and inner vertices. A 5-point star (pentagram) needs 10 vertices, a 6-point Star of David needs 12, an 8-point ninja star (Rub el Hizb) needs 16. The canonical 5-point CSS string is:

clip-path: polygon(
  50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
  50% 70%, 21% 91%, 32% 57%,  2% 35%, 39% 35%
);

Math: angles, radius and the golden ratio

For an N-point star, place outer points at angles i * 360°/N - 90° (so the first point looks up). Inner points sit at the midway angle outer + 180°/N, with a smaller radius:

outer.x = 50% + R * cos(θ)
outer.y = 50% + R * sin(θ)
inner.x = 50% + (R * k) * cos(θ + 180°/N)
inner.y = 50% + (R * k) * sin(θ + 180°/N)

The classic pentagram uses k = 0.382 (1/φ², the golden ratio squared). Tweak k to taste: 0.2 gives a sharp spiky star, 0.4-0.5 a chunkier puffy one, 0.7+ a near-circular gear.

Variations by point count

• 5-point (pentagram): rating UIs (Trustpilot, Yelp, Amazon), achievement badges.
• 6-point (Star of David / hexagram): religious and decorative symbols; can also be built as two overlapping triangles.
• 8-point (ninja star / Rub el Hizb): Islamic art motif and game UIs.
• 4-point (sparkle): cosmetic decorations and AI-content sparkle icons.

Animations, combinations and limits

Stars animate well between two polygons with the same vertex count — handy for pulse hovers via transform: scale(). To rotate a star, apply transform: rotate(angle) on the same element. The clip stretches when the element changes aspect ratio: set aspect-ratio: 1 to keep it perfectly symmetric. clip-path renders on a composited layer, so even a wall of stars stays at 60 fps.

Generator tools and alternatives

Manual math is tedious, so most developers use a generator (this page, Clippy at bennettfeely.com/clippy, or cssclippath.com). When you need crisp scaling regardless of element ratio, an SVG <polygon> with viewBox beats CSS clip-path. For animated micro-interactions and tight integration with DOM/text, CSS wins.

FAQ

Is the star math hard to do by hand? Yes — that's why every generator exists. Even the canonical 5-point pentagram uses irrational numbers tied to the golden ratio. Always copy from a generator and tweak the percentages if you need a custom look.

Why does my star look stretched? The clip-path follows the element's box. If the element is wider than tall, the star distorts. Set aspect-ratio: 1 or fix width and height equally to keep the shape symmetric.

Can I render many stars without lag? Yes. Each clipped element becomes a GPU-composited layer, so hundreds of stars in a rating list stay smooth. Avoid animating the clip itself on dozens of elements at once on low-end devices.

How do I make the inner radius smaller (spikier star)? Reduce the k ratio used for the inner vertices. The default golden-ratio 0.382 produces a balanced pentagram; values like 0.2 or 0.25 produce a needle-like silhouette typical of sheriff badges.