HTML 五角星 -- CSS

在HTML中显示五角星的方式方法有多种方法：

1. 显示特殊字符或者使用字体图标的方式
2. CSS 方式
3. SVG
4. canvas 绘制

关于 第一种 方式，不做介绍。接下来着重介绍 2, 3, 4 的方式实现。 

这篇文章要讲解的就是如何通过 CSS 的方式实现五角星。

对于 五角星，我们其实可以看作是 3 个三角形 通过旋转定位过后组合而成的。

这是组合出来的效果。我们可以在进行一次拆分：

可以看到上图的3个三角形通过定位就能组合成一个五角星了。

总结一下，通过 CSS 实现五角星需要的步骤：

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

1.实现三角形

利用 CSS 的 border 属性来实现三角形。

<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 {}

下面给出完整的实现整个五角星的 CSS 代码：

.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;
}