html css 画五角星,纯 CSS3 绘制图形（心形、五角星、六边形等）

这篇文章给大家带来的是纯 CSS 绘制五角星、六角形、五边形、六边形、心形等等。我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用，更多新奇的 CSS 作品涌现出来。

Star (6-points)

#star-six {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

position: relative;

}

#star-six:after {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 100px solid red;

position: absolute;

content: "";

top: 30px;

left: -50px;

}

Star (5-points)

#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);

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

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

}

#star-five:after {

position: absolute;

display: block;

color: red;

top: 3px;

left: -105px;

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-bottom: 70px solid red;

border-left: 100px solid transparent;

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

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

-ms-transform: rotate(-70deg);

-o-transform: rotate(-70deg);

content: "";

}

Pentagon

#pentagon {

position: relative;

width: 54px;

border-width: 50px 18px 0;

border-style: solid;

border-color: red transparent;

}

#pentagon:before {

content: "";

position: absolute;

height: 0;

width: 0;

top: -85px;

left: -18px;

border-width: 0 45px 35px;

border-style: solid;

border-color: transparent transparent red;

}

Hexagon

#hexagon {

width: 100px;

height: 55px;

background: red;

position: relative;

}

#hexagon:before {

content: "";

position: absolute;

top: -25px;

left: 0;

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 25px solid red;

}

#hexagon:after {

content: "";

position: absolute;

bottom: -25px;

left: 0;

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 25px solid red;

}

Octagon

#octagon {

width: 100px;

height: 100px;

background: red;

position: relative;

}

#octagon:before {

content: "";

position: absolute;

top: 0;

left: 0;

border-bottom: 29px solid red;

border-left: 29px solid #eee;

border-right: 29px solid #eee;

width: 42px;

height: 0;

}

#octagon:after {

content:"";

position: absolute;

bottom: 0;

left: 0;

border-top: 29px solid red;

border-left: 29px solid #eee;

border-right: 29px solid #eee;

width: 42px;

height: 0;

}

Heart

#heart {

position: relative;

width: 100px;

height: 90px;

}

#heart:before,

#heart:after {

position: absolute;

content: "";

left: 50px;

top: 0;

width: 50px;

height: 80px;

background: red;

-moz-border-radius: 50px 50px 0 0;

border-radius: 50px 50px 0 0;

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

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

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

-webkit-transform-origin: 0 100%;

-moz-transform-origin: 0 100%;

-ms-transform-origin: 0 100%;

-o-transform-origin: 0 100%;

transform-origin: 0 100%;

}

#heart:after {

left: 0;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

-webkit-transform-origin: 100% 100%;

-moz-transform-origin: 100% 100%;

-ms-transform-origin: 100% 100%;

-o-transform-origin: 100% 100%;

transform-origin :100% 100%;

}

大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：【幸凡前端技术交流群】

0

如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)