Чистая форма звезды CSS

На CSS CSS-трюки есть много CSS-шаблонов. Меня особенно удивляет звезда:

Star image

Как CSS ниже создает эту форму?

#star-five {
  margin: 50px 0;
  position: relative;
  display: block;
  color: red;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  border-left: 100px solid transparent;
  transform: rotate(35deg);
}
#star-five:before {
  border-bottom: 80px solid red;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -45px;
  left: -65px;
  display: block;
  content: '';
  transform: rotate(-35deg);
}
#star-five:after {
  position: absolute;
  display: block;
  color: red;
  top: 3px;
  left: -105px;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  border-left: 100px solid transparent;
  transform: rotate(-70deg);
  content: '';
}
<div id="star-five"></div>

Ответы

Ответ 1

Позвольте разбить его на части:

Желтые границы фактически установлены как transparent в конечном продукте, поэтому они не отображаются. Они здесь желтые, чтобы показать, как выглядят границы.

Как уже отмечалось выше, этот ответ показывает идею основной формы треугольника.

Div по себе:

<div id="star-five"></div>

Piece one

Объединение псевдоэлемента :before совпадает с этим:

<div id="star-five">
    <div id="before"></div>
</div>

Piece two

Наконец, объединение псевдоэлемента :after совпадает с этим:

<div id="star-five">
    <div id="before"></div>

    <div id="after"></div>
</div>

Piece three

Теперь вы аккуратно накладываете каждый элемент с помощью position: absolute; и вращаетесь с помощью transform по мере необходимости, чтобы получить конечный продукт:

Final product

Представьте себе это!

Animation

Ответ 2

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