CSS Star大纲

Question

有没有办法制作一个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;
       -moz-transform:    rotate(35deg);
       -webkit-transform: rotate(35deg);
       -ms-transform:     rotate(35deg);
       -o-transform:      rotate(35deg);
    }
.star-five:before{
...
}
.star-five:after {
...
}

这里的工作示例：jsfiddle

但是红色轮廓的透明填充呢？

Answer 1

我知道这不是你想要的答案，但无论如何我都会发布它。据我所知，纯CSS无法做到这一点。但是，在我的网站上，我采取了更简单的方法。我不得不用星星打造一个评级栏。我没有用CSS创建明星，而是简单地做了这个：

<span>☆</span>

您可以根据自己的喜好设置此星标（甚至可以使用CSS content属性填充它）。

希望得到这个帮助，并期待在这里看到其他答案。

Answer 2

您可以使用SVG：

<svg width="320" height="320"><path  d="
M 160.000 180.000
L 183.511 192.361
L 179.021 166.180
L 198.042 147.639
L 171.756 143.820
L 160.000 120.000
L 148.244 143.820
L 121.958 147.639
L 140.979 166.180
L 136.489 192.361
L 160.000 180.000
" stroke="#f00" stroke-width="1" fill="none"/></svg>

如果有帮助，我使用此网站生成它：http://www.smiffysplace.com/stars.html

Answer 3

这是一个使用您提供的相同Fiddle的纯CSS解决方案。我只是缩了一颗星，然后变成了白色。

body {
  margin: 0px;
}

.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;
  -moz-transform: rotate(35deg);
  -webkit-transform: rotate(35deg);
  -ms-transform: rotate(35deg);
  -o-transform: rotate(35deg);
}

.star-five:before {
  border-bottom: 80px solid red;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  position: absolute;
  height: 10px;
  width: 0;
  top: -45px;
  left: -65px;
  display: block;
  content: '';
  -webkit-transform: rotate(-35deg);
  -moz-transform: rotate(-35deg);
  -ms-transform: rotate(-35deg);
  -o-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;
  -webkit-transform: rotate(-70deg);
  -moz-transform: rotate(-70deg);
  -ms-transform: rotate(-70deg);
  -o-transform: rotate(-70deg);
  content: '';
}

.star-outline>.star-five,
.star-outline>.star-five:before,
.star-outline>.star-five:after {
  border-bottom-color: white;
}

.star-outline {
  position: absolute;
  top: 0px;
  left: 0px;
  transform: scale(0.9);
}

<div class="star">
  <span class="star-five" width="10" height="10">
</span>

  <div class="star-outline">
    <span class="star-five">
</span>
  </div>
</div>