在HTML中显示五角星的方式方法有多种方法:
- 显示特殊字符或者使用字体图标的方式
- CSS 方式
- SVG
- canvas 绘制
关于 第一种 方式,不做介绍。接下来着重介绍 2, 3, 4 的方式实现。
这篇文章要讲解的就是如何通过 CSS 的方式实现五角星。
对于 五角星,我们其实可以看作是 3 个三角形 通过旋转定位过后组合而成的。
这是组合出来的效果。我们可以在进行一次拆分:
可以看到上图的3个三角形通过定位就能组合成一个五角星了。
总结一下,通过 CSS 实现五角星需要的步骤:
- 三角形
- 需要3个三角形
- 旋转
- 定位
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;
}