html绘制五角星坐标,使用CSS如何绘制五角星？（附代码）

下面本篇文章给大家介绍一下如何使用纯CSS绘制五角星、六角形、五边形、六边形、心形。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

1、五角星

#star-five {

margin: 50px 0;

position: relative;

display: block;

color: red;

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-bottom: 70px solid red;

border-left: 100px solid transparent;

-moz-transform: rotate(35deg);

-webkit-transform: rotate(35deg);

-ms-transform: rotate(35deg);

-o-transform: rotate(35deg);

}

#star-five:before {

border-bottom: 80px solid red;

border-left: 30px solid transparent;

border-right: 30px solid transparent;

position: absolute;

height: 0;

width: 0;

top: -45px;

left: -65px;

display: block;

content: '';

-webkit-transform: rotate(-35deg);

-moz-transform: rotate(-35deg);