CSS3引入的伪元素和变换特性使得实现五角星图形非常简单，并且可以结合渐变实现更为漂亮的效果。
因此使用图片实现五角星已经毫无必要（图片占用额外的请求，且数据量大。除非要支持低版本的桌面IE浏览器）。
首先我们创建一个三角形，这通常是使用带大尺寸边线而零内容尺寸的元素来实现，代码示范：
.tri { width: 0height: 0border-left: 15px solid transparentborder-right: 15px solid transparentborder-bottom: 30px solid red}
第二步，我们使用伪元素:after和:before来克隆2个同样大小的三角形。
.tri:after,.tri:before { width: 0height: 0border-left: 15px solid transparentborder-right: 15px solid transparentborder-bottom: 30px solid red}
然后，我们在上述2个伪元素上分别应用不同的旋转变换：
.tri:before { transform: rotate(70deg)}.tri:after { transform: rotate(-70deg)}
这样我们就实现了一个五角星图形（图标）。我们可以用类似的方法实现更多的几何形状。
不会今日学习内容：2D转换之位移、旋转(包括旋转原点的设置)、缩放、倾斜；3D转换之位移、旋转、缩放、倾斜。
总结如下要点：
(一)2D转换
(若想看到变换效果，要给图形的盒子设置过渡transition:3s)
1.位移
语法=>transform:translate(x,y)
其中x表示水平方向的位移(即左右)，y表示垂直方向的位移(即上下)。
括号内最多只能有2个值，当只有1个值的时候表示水平位移。
值的大小可以为正数，也可以为负数。当值为负数的时候向反方向移动。
值的单位可以为像素(如100px，-100px)，也可以为百分比(如50%，-50%)。当值用百分比来表示的时候，参照的是元素translate所在盒子的大小。
translate属性不脱标！
2.旋转
语法=>transform：rotate()
括号内表示旋转的角度，必须使用单位deg。
当括号内的值为正数时，表示顺时针旋转；为负数时，表示逆时针旋转。
先说方法步骤：
首先创建一个三角形，使用带大尺寸边线而零内容尺寸的元素来实现。
使用伪元素:after和:before来克隆2个同样大小的三角形。
在上面所说的2个伪元素上分别应用不同的旋转变换来达到五角星效果。
代码如下：
<!--创建三角形-->
.tri {
width: 0
height: 0
border-left: 15px solid transparent
border-right: 15px solid transparent
border-bottom: 30px solid red
}
<!--使用伪类元素-->
.tri:after,.tri:before {
width: 0
height: 0
border-left: 15px solid transparent
border-right: 15px solid transparent
border-bottom: 30px solid red
}
<!--旋转-->
.tri:before {
transform: rotate(70deg)
}
.tri:after {
transform: rotate(-70deg)
}
