使用css3在网页中实现五角星样式（原理解析）

我们平时在web网页中看到的各种图形包括正方形，长方形，三角形，圆形等，大部分是使用css3或者背景图片来实现的，但是在开发的过程中，使用背景图片的截取有着很多的不足，比如图片需要占用额外的请求，对图片像素要求较高等，所以当下css3成为比较主流的实现方法。现在我们通过画出五角星来向大家展示一下伪元素和transform用法。

使用css3实现五角星样式的原理

我们先使用带大尺寸边线而零内容尺寸的元素来实现一个三角形样式（详情请关注 使用css3在网页中实现各种三角形样式集合），然后使用伪元素:after和:before来克隆2个同样大小的三角形，最后将这2个伪元素分别应用不同的旋转变换，实现五角星的样式。

css3伪元素

CSS的主要目的是给HTML元素添加样式，事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身，这就是伪元素。一开始伪元素的语法是使用“:”，但是在CSS3修订后的伪元素统一使用“::”用以区分伪元素和伪类（比如:hover，:active等）。本文将会引用:before和:after两个伪元素，:before将会在内容之前添加一个元素而:after将会在内容后添加一个元素（在它们之中添加内容我们可以使用content属性）。

css3的新属性transform

transform属性向元素应用2D或3D的转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。本文将使用transform将克隆之后的两个三角形分别进行不同方向的旋转。

使用css3实现五角星样式的步骤以及实现代码

步骤一：创建一个三角形

.tri {
 width: 0;
 height: 0;
 border-left: 15px solid transparent;
 border-right: 15px solid transparent;
 border-bottom: 30px solid red;
}

步骤二：我们使用伪元素:after和:before来克隆2个同样大小的三角形

.tri:after,.tri:before {
 width: 0;
 height: 0;
 border-left: 15px solid transparent;
 border-right: 15px solid transparent;
 border-bottom: 30px solid red;
}

步骤三：将上述2个伪元素分别进行方向不同的70°旋转变换

.tri:before {
 transform: rotate(70deg);
}
.tri:after {
 transform: rotate(-70deg);
}

使用css3实现五角星样式效果如图所示

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com