广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

css写五角星的方法：首先创建一个HTML示例文件；然后通过small名class创建div；最后通过设置“transform: rotate(70deg);”等样式来实现五角星即可。

本文操作环境：windows7系统、HTML5&&CSS3版，DELL G3电脑

使用css实现五角星

大五角星

通过small名class创建div

.small-all{display: flex;margin:1rem 13%;}.small {    border-color: #7d7d7d transparent transparent transparent;    border-style: solid;    border-top-width: 9.375px;    border-right-width: 15px;    border-left-width: 15px;    height: 0;    margin-top: 9.375px;    margin-bottom: 6.02679px;    position: relative;    width: 0;    margin: 2rem 0.8rem;}.small:before,.small:after {    border-color: #7d7d7d transparent transparent transparent;    border-style: solid;    border-top-width: 9.375px;    border-right-width: 15px;    border-left-width: 15px;    content: '';    display: block;    height: 0;    left: -15px;    position: absolute;    top: -9.375px;    width: 0;}.small:before {    transform: rotate(70deg);}.small:after {    transform: rotate(-70deg);}

实现效果

小五角星

通过smaller名class创建div

.smaller {    border-color: #7d7d7d transparent transparent transparent;    border-style: solid;    border-top-width: 5px;    border-right-width: 10px;    border-left-width: 10px;    height: 0;    margin-right: 1.2rem;    margin-top: 5px;    margin-bottom: 3.21429px;    position: relative;    width: 0;}.smaller:before,.smaller:after {    border-color: #7d7d7d transparent transparent transparent;    border-style: solid;    border-top-width: 5px;    border-right-width: 10px;    border-left-width: 10px;    content: '';    display: block;    height: 0;    left: -10px;    position: absolute;    top: -5px;    width: 0;}.smaller:before {    transform: rotate(70deg);}.smaller:after {    transform: rotate(-70deg);}

实现效果

推荐学习：《css视频教程》

以上就是css怎么写五角星的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~