Замотался, но про вас не забыл, котаны!
Вторая, а может и первая, по популярности фигура на сайтах — это звезда. То рейтинг ей поставят, то маской наложат, то конфетти сделают...
Так вот, из поста про треугольники мы уже в курсе, что clip-path можно применять везде. И даже нужно. Так почему бы не нарисовать им звезду?
«Наверное, потому что задолбаешься точки ставить?», — скажете вы, и будете, в целом, правы. Их там вроде... 10? Десять же, да?
Нет! Оказывается, достаточно пяти!
Глядите чо: https://codepen.io/t_afif/pen/jORvmKG
1. Вариант на тригонометрических функциях:
clip-path: polygon(50% 0,
calc(50%*(1 + sin(.4turn))) calc(50%*(1 - cos(.4turn))),
calc(50%*(1 - sin(.2turn))) calc(50%*(1 - cos(.2turn))),
calc(50%*(1 + sin(.2turn))) calc(50%*(1 - cos(.2turn))),
calc(50%*(1 - sin(.4turn))) calc(50%*(1 - cos(.4turn)))
);
2. Упрощённый вариант, когда всё уже посчитано за нас:
clip-path: polygon(50% 0,80% 100%,0 39%,100% 39%,20% 100%);
Чтобы понять, как это работает, проще сразу загрузить в генератор clip-path: https://bennettfeely.com/clippy/
Вы не поверите, но это буквально совпадает с тем, как вы безотрывно рисуете звезду карандашом ещё со школьных времён!
#css #star #clip #бородач