纯净的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，因此无法显示。它们在这里是黄色的，以显示边框的外观。

如上所述，this answer显示了基本三角形形状背后的想法。

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以获得最终产品：

让我们想象一下吧！

Answer 2

您可以使用大边框绘制三角形，这就是那里发生的事情。然后他们只是以星形图案旋转和定位三角形。