CSS Clip-Path Estrela

CSS clip-path estrela: desenhando pentagramas, hexagramas e shurikens

Uma estrela em clip-path: polygon() é construída alternando vértices externos e internos. Uma estrela de 5 pontas (pentagrama) precisa de 10 vértices, a Estrela de Davi de 6 pontas tem 12, uma shuriken de 8 pontas (Rub el Hizb) usa 16. A string canônica para 5 pontas é:

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

Matemática: ângulos, raio e a razão áurea

Para uma estrela de N pontas, posicione os pontos externos em ângulos i * 360°/N - 90° (para que o primeiro fique apontado para cima). Os pontos internos ficam no ângulo intermediário externo + 180°/N, com raio menor:

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

O pentagrama clássico usa k = 0,382 (1/φ², o quadrado do inverso da razão áurea). Ajuste o k conforme o estilo: 0,2 gera estrela bem afiada, 0,4-0,5 uma estrela mais bojuda, 0,7+ chega perto de uma engrenagem.

Variações por número de pontas

• 5 pontas (pentagrama): UI de avaliação (Trustpilot, Yelp, Amazon), badges de conquista.
• 6 pontas (Estrela de Davi / hexagrama): simbologia religiosa e decorativa; pode ser feita também por dois triângulos sobrepostos.
• 8 pontas (shuriken / Rub el Hizb): arte islâmica e HUD de games.
• 4 pontas (sparkle): decorações cosméticas e ícones de "conteúdo IA".

Animação, combinação e limites

Estrelas animam bem entre dois polígonos com o mesmo número de vértices — perfeito para hover de pulso via transform: scale(). Para girar a estrela, aplique transform: rotate(angulo) no mesmo elemento. O clip estica quando o aspect-ratio muda: defina aspect-ratio: 1 para manter simetria. O clip-path renderiza em uma camada composta, então um paredão de estrelas roda a 60 fps tranquilamente.

Geradores e alternativas

A matemática manual é trabalhosa, então a maioria dos devs usa um gerador (esta página, o Clippy em bennettfeely.com/clippy ou o cssclippath.com). Quando o objetivo é manter a estrela proporcional independente do ratio do elemento, um <polygon> SVG com viewBox ganha do clip-path CSS. Para micro-interações animadas e integração com DOM/texto, o CSS vence.

Perguntas frequentes

A matemática da estrela é difícil mesmo? Sim — por isso todo gerador existe. Até o pentagrama canônico envolve números irracionais ligados à razão áurea. Copie do gerador e ajuste percentuais se quiser um visual customizado.

Por que minha estrela aparece esticada? O clip-path segue a caixa do elemento. Se o elemento é mais largo que alto, a estrela distorce. Defina aspect-ratio: 1 ou fixe width e height iguais para manter a forma simétrica.

Dá para renderizar muitas estrelas sem travar a página? Sim. Cada elemento clipado vira camada composta na GPU, então centenas de estrelas em uma lista de avaliação ficam suaves. Evite animar o próprio clip em dezenas de elementos simultâneos em devices fracos.

Como deixar o raio interno menor (estrela mais afiada)? Diminua o ratio k usado nos vértices internos. O padrão 0,382 (razão áurea) gera o pentagrama equilibrado; valores como 0,2 ou 0,25 produzem aquela silhueta agulhada de estrelas de xerife.