CSS:.star-five{width:0;height:0;color:red;margin:50px0;position:relative;display:block;border-左：100px实心透明；border-right：100px实心透明；border-bottom：70px实心红色；transform:rotate(35deg);}.star-five:before{width:0;height:0;border-left:30px纯色透明；右边框：30px纯色透明；border-bottom：80px纯红色；位置：绝对；顶部：-45px；左：-65px；颜色：白色；显示：块；内容：“”；变换：旋转（-35deg);}.star-five:after{width:0;height:0;display:block;position:absolute;color:red;top:3px;left:-105px;border-left:100pxsolidtransparent;border-right:100pxsolidtransparent;border-bottom:70pxsolidred;content:"";transform:rotate(-70deg);}不推荐使用这个在线预览地址，因为后期改颜色状态比较麻烦选型，而且改起来很麻烦不方便，不像以前的方便易维护。4、直接使用五角星符号★?，简单粗暴，易于控制，外观协调。以下实施方法以★为准。一些关于CSS的选择器不使用js来控制评分。当然，你也不能错过强大的CSS选择器。这里我们先介绍一些用来实现这个功能的CSS选择器。在介绍css强大的选择器之前，先科普一下“CSSradio/checkbox单复选框元素显示及隐藏技术”，也就是所谓的“checkboxhack技术”。1.checkboxhack技术我们利用CSS中一些特殊的选择器，再配合单选按钮和复选框的一些特性来实现元素的显示和隐藏效果。然后通过一些简单的扩展，我们可以在不使用任何JavaScript代码的情况下实现类似的东西：自定义单选框，“更多”的展开和折叠效果，标签切换效果，或者多级下拉列表效果等等，相信很多前端开发者会遇到老板修改checkbox和radio样式，毕竟内置的样式太丑了。后来发现修改内置样式没那么容易，最后直接使出了杀手锏——点击后替换图片。今天教大家一个不用更换图片就可以随意修改样式的方法。先看效果图：`先说说原理：两个关键的东西，一个是伪类选择器：checked，表示选中时对应控件元素（单选框或复选框）的样式;另一个是加号+相邻兄弟选择器，这个符号表示选择后面的兄弟节点。因此，通过两者的配合，你可以轻松控制后面元素的显示或隐藏，或者其他样式。以及如何让单选框选中或取消选中，即label标签，for属性锚定对应的单选框或复选框，点击这里的label元素时，对应的单选框被选中或取消选中.那么，就有了上面的效果！`这里只是单选按钮的代码，仅供参考：HTML:前端工程师后端工程师全栈工程师