纯CSS星形[重复]

Posted 2023-03-06

【中文标题】纯CSS星形[重复]

【英文标题】：Pure CSS star shape [duplicate]

【发布时间】：2014-10-12 15:11:29

【问题描述】：

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>

【问题讨论】：

三个三角形相互重叠并旋转。见：***.com/questions/7073484/…

我们怎样才能让这 5 个点有点圆而不是尖点

【参考方案1】：

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

【参考方案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 旋转以获得最终产品：

让我们想象一下吧！

【讨论】：

+1 非常好的演示文稿。

真的，它是令人敬畏的represnetd。在理解上做到清晰完善

很棒的解释和可视化。谢谢你！