Как сделать звезду в css

Для создания звезды в CSS можно использовать свойства transform и rotate.

Пример кода для создания звезды с помощью пяти треугольников:

HTML:

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

CSS:

.star {
  height: 0;
  width: 0;
  border-right: 50px solid transparent;
  border-bottom: 35px solid #f5d76e;
  border-left: 50px solid transparent;
  position: relative;
  margin-top: 100px;
}

.star::before {
  height: 0;
  width: 0;
  border-right: 15px solid transparent;
  border-bottom: 10px solid #fff;
  border-left: 15px solid transparent;
  position: absolute;
  content: "";
  top: -23px;
  left: 17px;
  transform: rotate(35deg);
}

.star::after {
  height: 0;
  width: 0;
  border-right: 15px solid transparent;
  border-bottom: 10px solid #fff;
  border-left: 15px solid transparent;
  position: absolute;
  content: "";
  top: -23px;
  left: 70px;
  transform: rotate(-35deg);
}

.star > div {
  height: 0;
  width: 0;
  border-right: 15px solid transparent;
  border-bottom: 10px solid #f5d76e;
  border-left: 15px solid transparent;
  position: absolute;
  top: 0;
}

.star > div:nth-child(1) {
  transform: rotate(35deg) translate(0,-30px);
}

.star > div:nth-child(2) {
  transform: rotate(70deg) translate(0,-30px);
}

.star > div:nth-child(3) {
  transform: rotate(105deg) translate(0,-30px);
}

.star > div:nth-child(4) {
  transform: rotate(140deg) translate(0,-30px);
}

.star > div:nth-child(5) {
  transform: rotate(175deg) translate(0,-30px);
}

Здесь мы используем элемент <div>, которому задаем размеры с помощью свойств height и width, а также рамки с помощью свойства border. Затем мы добавляем треугольники-заклепки с помощью псевдоэлементов ::before и ::after, задавая им размеры, направления границ и повороты с помощью свойства transform.

Также мы используем пять элементов <div> для создания пяти треугольников звезды, задавая им одинаковые рамки и различные направления поворотов с помощью свойства transform. Затем мы перемещаем эти элементы в нужную позицию с помощью свойства translate.

Результатом этого кода будет звезда, которая отображается на странице. Чтобы изменить размер, цвет или другие свойства этой звезды, необходимо изменить значения свойств стиля, заданные в CSS.