纯净的CSS星形

Question

CSS Tricks上显示了很多CSS形状.我对这位明星特别感到惊讶:

下面的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>

Answer 1

让我们分成几块:

黄色边框实际上设置为transparent最终产品,因此它们不显示.它们在这里是黄色的,以显示边框的外观.

如上所述,这个答案显示了基本三角形形状背后的想法.

div本身:

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

组合:before伪元素与此相同:

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

最后,组合:after伪元素与此相同:

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

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

现在,您position: absolute;可以transform根据需要精确地使用和旋转每个元素以获得最终产品:

让我们想象吧!