CSS-эффекты и графика

Звёздные вспышки

Многолучевая звезда-ценник одним clip-path: число лучей, глубина выреза между ними и поворот. Считается математикой, поэтому фигура симметрична при любых настройках.

Загрузить пример

Заготовки

Настройки

Лучей: 12 Глубина выреза: 28 % Ноль — луч почти не выделяется, сто — звезда превращается в иглы. Поворот: 0°

Цвет Второй цвет градиента

Надпись на вспышке

Превью

−50 %

Вершин у фигуры 24 — по внешней и внутренней на каждый луч.

CSS

.starburst {
  clip-path: polygon(50% 0%, 59.32% 15.23%, 75% 6.7%, 75.46% 24.54%, 93.3% 25%, 84.77% 40.68%, 100% 50%, 84.77% 59.32%, 93.3% 75%, 75.46% 75.46%, 75% 93.3%, 59.32% 84.77%, 50% 100%, 40.68% 84.77%, 25% 93.3%, 24.54% 75.46%, 6.7% 75%, 15.23% 59.32%, 0% 50%, 15.23% 40.68%, 6.7% 25%, 24.54% 24.54%, 25% 6.7%, 40.68% 15.23%);
}