纯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

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

Answer 2

让我们把它分成几块：

黄色边框在最终产品中实际上设置为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 旋转以获得最终产品：

让我们想象一下吧！