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視頻教程》