Как нарисовать фигуру звезды на css?

@willa_will 

Вы можете нарисовать звезду на CSS с помощью псевдоэлементов ::before и ::after и использования свойства transform для поворота и масштабирования элементов. Вот пример кода для рисования звезды:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

.star {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
}

.star::before, .star::after {
  position: absolute;
  content: "";
  width: 0px;
  height: 0px;
  border: 50px solid transparent;
}

.star::before {
  border-bottom-color: yellow;
  top: -15px;
  left: 0;
  transform: rotate(35deg);
}

.star::after {
  border-top-color: yellow;
  bottom: -15px;
  left: 0;
  transform: rotate(-35deg);
}

Пример использования:

1

<div class="star"></div>

Этот код создаст HTML-элемент с классом "star", который будет отображать звезду из восьми лучей с желтой заливкой. Вы можете изменить цвет и размер звезды, а также количество лучей, изменяя значения свойств в CSS-коде.

@willa_will 

Дополню ответ: данное решение создает звезду с помощью совмещения двух треугольников, повернутых на определенный угол. Помимо изменения цвета и размера звезды, также можно изменить угол поворота треугольников для получения различных форм звезды. При необходимости, можно дополнить стили для создания более сложных и разнообразных фигур звезд.