纯CSS星形 [英] Pure CSS star shape

问题描述

CSS技巧上显示了很多CSS形状.这位明星让我特别惊讶:

There are a lot of CSS shapes shown on CSS Tricks. I am particularly surprised by the star:

下面的CSS如何创建这种形状?

How does the CSS below create this shape?

#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>

推荐答案

让我们把它分成几部分:

Let's break it into pieces:

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

The yellow borders are actually set as transparent in the final product so they don't show. They are yellow here to show how the borders look.

如上所述，此答案显示基本三角形形状背后的想法.

As commented above, this answer shows the idea behind the basic triangle shape.

div本身:

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

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

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

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

Finally, combining the :after pseudo element is the same as this:

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

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

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

Now you overlap each element precisely using position: absolute; and rotate with transform as needed to get the final product:

让我们想象一下！

这篇关于纯CSS星形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！