html css 怎么画星形,CSS画各种图形（五角星、吃豆人、太极图等）

前言

这里说的用css做图形，其实是使用一个html元素，结合它的伪元素 ::before & ::after (不需要其他额外的非伪元素的html元素)，然后定义样式来生成所需的图形。前面有讲过如何用css绘制箭头，三角形，可以去了解一下CSS绘制三角形和箭头，不用再用图片了

这里不是说不可以使用其他的html元素，只是这样的好处是在html方便引入，而不需要每次引入都需要添加大量的html片段。

主要方法

可以使用的样式属性如下：* border

* border-radius

* transform

* box-shadow

演示

扇形

width: 0;

height: 0;

border-left: 70px solid transparent;

border-right: 70px solid transparent;

border-top: 100px solid red;

border-radius: 50%;

梯形

border-bottom: 100px solid red;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

height: 0;

width: 100px;

平行四边形

width: 150px;

height: 100px;

transform: skew(20deg);

background: red;

五边形

#pentagon {

position: relative;

width: 54px;

box-sizing: content-box;

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 {

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;

}

返回箭头

#curvedarrow {

position: relative;

width: 0;

height: 0;

border-top: 9px solid transparent;

border-right: 9px solid red;

transform: rotate(10deg);

}

#curvedarrow:after {

content: "";

position: absolute;

border: 0 solid transparent;

border-top: 3px solid red;

border-radius: 20px 0 0 0;

top: -12px;

left: -9px;

width: 12px;

height: 12px;

transform: rotate(45deg);

}

五角星

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

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: '';

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;

transform: rotate(-70deg);

content: '';

}

十二角星

#burst-12 {

background: red;

width: 80px;

height: 80px;

position: relative;

text-align: center;

}

#burst-12:before, #burst-12:after {

content: "";

position: absolute;

top: 0;

left: 0;

height: 80px;

width: 80px;

background: red;

}

#burst-12:before {

transform: rotate(30deg);

}

#burst-12:after {

transform: rotate(60deg);

}

心型

#heart {

position: relative;

width: 100px;

height: 90px;

}

#heart:before, #heart:after {

position: absolute;

content: "";

left: 50px;

top: 0;

width: 50px;

height: 80px;

background: red;

border-radius: 50px 50px 0 0;

transform: rotate(-45deg);

transform-origin: 0 100%;

}

#heart:after {

left: 0;

transform: rotate(45deg);

transform-origin: 100% 100%;

}

结型

#infinity {

position: relative;

width: 212px;

height: 100px;

box-sizing: content-box;

}

#infinity:before, #infinity:after {

content: "";

box-sizing: content-box;

position: absolute;

top: 0;

left: 0;

width: 60px;

height: 60px;

border: 20px solid red;

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

transform: rotate(-45deg);

}

#infinity:after {

left: auto;

right: 0;

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

transform: rotate(45deg);

}

钻石型

#cut-diamond {

border-style: solid;

border-color: transparent transparentred transparent;

border-width: 0 25px 25px 25px;

height: 0;

width: 50px;

box-sizing: content-box;

position: relative;

margin: 20px 0 50px 0;

}

#cut-diamond:after {

content: "";

position: absolute;

top: 25px;

left: -25px;

width: 0;

height: 0;

border-style: solid;

border-color: red transparent transparent transparent;

border-width: 70px 50px 0 50px;

}

吃豆人

#pacman {

width: 0px;

height: 0px;

border-right: 60px solid transparent;

border-top: 60px solid red;

border-left: 60px solid red;

border-bottom: 60px solid red;

border-top-left-radius: 60px;

border-top-right-radius: 60px;

border-bottom-left-radius: 60px;

border-bottom-right-radius: 60px;

}

太极

#yin-yang {

width: 96px;

box-sizing: content-box;

height: 48px;

background: #eee;

border-color: red;

border-style: solid;

border-width: 2px 2px 50px 2px;

border-radius: 100%;

position: relative;

}

#yin-yang:before {

content: "";

position: absolute;

top: 50%;

left: 0;

background: #eee;

border: 18px solid red;

border-radius: 100%;

width: 12px;

height: 12px;

box-sizing: content-box;

}

#yin-yang:after {

content: "";

position: absolute;

top: 50%;

left: 50%;

background: red;

border: 18px solid #eee;

border-radius: 100%;

width: 12px;

height: 12px;

box-sizing: content-box;

}

锁

#lock {

font-size: 8px;

position: relative;

width: 8em;

height: 6em;

border-radius: 1em;

top: 5em;

box-sizing: border-box;

border: 3em solid red;

margin: 0 0 6rem 0;

}

#lock:before {

content: "";

box-sizing: border-box;

position: absolute;

border: 1em solid red;

width: 6em;

height: 6em;

left: 50%;

margin-left: -3em;

top: -7em;

border-top-left-radius: 3em;

border-top-right-radius: 3em;

}

#lock:after {

content: "";

box-sizing: border-box;

position: absolute;

border: 1em solid white;

width: 1em;

height: 2em;

border-radius: .5em;

left: 50%;

top: -1em;

margin-left: -1em;

}

等等，更多内容点击了解更多。