这里主要讲css3制作五角星图形实例。以前我们需要用到五角星或者其它形状图形的时候大多数是通过背景图片来代替的，随着css3的出现，我们完全可以使用css3伪元素和变换特性来做五角星图形了。如果大家只做移动端或者pc端不考虑低版本的IE浏览器，可以使用css3来实现五角星图形，使用图片实现五角星已经毫无必要，因为图片占用额外的请求，且数据量大。
那么该如何使用css3制作五角星呢?如图所示:
先了解一些css3的属性：
transform:属性向元素应用2D或3D转换,对元素进行旋转、缩放、移动或倾斜,这里主要是用到旋转。
rotate：角度，可以定义2D旋转、3D旋转，这里只用到2D旋转。
before：伪类选择器，在..之前。
after:伪类选择器，在..之后。
实现原理:
其实制作这个五角星很简单的，就是做出三个三角图形然后通过旋转角度最后通过定位把它们组合在一起就成了五角星了。
为了让大家直观点，我把三个三角图形的颜色改下，如图所示：
好了不多说了，接下来是贴代码...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.wrap{
position: relative;
margin: 100px;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 80px solid red;
transform:rotate(35deg);
}
.wrap:before{
content: "";
position: absolute;
left: -100px;
top: 0px;
width: 0;
height: 0;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
border-bottom: 80px solid red;
transform:rotate(-70deg);
}
.wrap:after{
content: "";
position: absolute;
left: -63px;
top: -47px;
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 80px solid red;
transform: rotate(-35deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>这样我们就实现了五角星图形了，细细琢磨下，我们是否也可以用类似的方法制作出其它形状的图形呢？答案是肯定的。
如有疑问或者写的不对的地方，欢迎指出。