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

Пользователь

от willa_will , в категории: HTML/CSS , 6 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от jakayla , 6 месяцев назад

@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-коде.