1. 三角形
2. 需要3个三角形
3. 旋转
4. 定位

1.实现三角形

<div class="star-five"></div>

.star-five {width: 0;height: 0;position: relative;border-bottom: 70px solid blue;border-left: 100px solid transparent;border-right: 100px solid transparent;margin-top: 80px;
}

这样就能实现一个下面这样的三角形了。

transform: rotate(35deg);
-moz-transform: rotate(35deg); /* Firefox */
-o-transform: rotate(35deg); /* Opera */
-webkit-transform: rotate(35deg); /* Safari and Chrome */
-ms-transform: rotate(35deg); /* IE 9 */

2.三个三角形

实现三个三角形，可以是通过三个标签；但是这里用的是 CSS 的伪元素选择器( ::before, ::after)来实现的并且对于三个选择器通过 position 定位就能组合成一个完整的五角星了。

.star-five {}
.star-five::before {}
.star-five::after {}

.star-five {width: 0;height: 0;position: relative;border-bottom: 70px solid blue;border-left: 100px solid transparent;border-right: 100px solid transparent;transform: rotate(35deg);-moz-transform: rotate(35deg); /* Firefox */-o-transform: rotate(35deg); /* Opera */-webkit-transform: rotate(35deg); /* Safari and Chrome */-ms-transform: rotate(35deg); /* IE 9 */margin-top: 80px;
}
.star-five::before {content: '';width: 0;height: 0;display: block;border-bottom: 70px solid red;border-left: 100px solid transparent;border-right: 100px solid transparent;position: absolute;top: 0;left: -94px;transform: rotate(75deg);-moz-transform: rotate(75deg); /* Firefox */-o-transform: rotate(75deg); /* Opera */-webkit-transform: rotate(75deg); /* Safari and Chrome */-ms-transform: rotate(75deg); /* IE 9 */
}
.star-five::after {content: '';width: 0;height: 0;color: blue;border-bottom: 70px solid green;border-left: 100px solid transparent;border-right: 100px solid transparent;transform: rotate(-70deg);-moz-transform: rotate(-70deg); /* Firefox */-o-transform: rotate(-70deg); /* Opera */-webkit-transform: rotate(-70deg); /* Safari and Chrome */-ms-transform: rotate(-70deg); /* IE 9 */position: absolute;left: -100px;top: 0;
}