CSS 星形大纲

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 属性填充它)。

希望这对您有所帮助，并期待在这里看到其他答案。