在HTML中要打五角星需要使用CSS来实现,以下是一个简单的实现方法:
.star { display: inline-block; position: relative; width: 0; height: 0; margin-left: 10px; margin-right: 10px; border-right: 20px solid transparent; border-bottom: 30px solid yellow; border-left: 20px solid transparent; transform: rotate(35deg); } .star:before { content: ""; position: absolute; top: -10px; left: -20px; width: 0; height: 0; border-right: 20px solid transparent; border-bottom: 30px solid yellow; border-left: 20px solid transparent; transform: rotate(-70deg); } .star:after { content: ""; position: absolute; top: -10px; left: 0; width: 0; height: 0; border-right: 20px solid transparent; border-bottom: 30px solid yellow; border-left: 20px solid transparent; transform: rotate(70deg); }
这段代码使用了伪元素:before和:after来实现五角星的左右两个尖角,而中间的三角则是借助了元素边框的特性得到的。要使用这个效果,只需要在HTML文件中添加以下代码就可以了:
五角星
这里的标签可以替换成其他的标签来应用五角星效果,比如标签用于超链接。