css怎么写五角星

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视频教程》