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

本篇文章给大家带来的内容是关于使用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实现五角星样式效果如图所示

html网页中加五角星,使用css3在网页中实现五角星样式（原理解析）相关推荐

modprobe:用于向内核中加载模块或者从内核中移除模块。
modprobe:用于向内核中加载模块或者从内核中移除模块. modprobe br_netfilter 加载模块 modprobe -r br_netfilter 移除 1.查看系统中所有modul ...
modprobe命令用于智能地向内核中加载模块或者从内核中移除模块
modprobe命令用于智能地向内核中加载模块或者从内核中移除模块. modprobe可载入指定的个别模块,或是载入一组相依的模块.modprobe会根据depmod所产生的相依关系,决定要载入哪些模 ...
html网页设计中加横线,HTML：让网页超链接拥有多姿多彩的下划线(2)-网页设计,HTML/CSS...
二.实例欣赏假设有两个下划线图形diagonal.gif(波纹线).flower.gif(花朵)前者的高.宽是3.9,后者的高.宽是11.15.下面是一个设置两种下划线的完整实例: 自定义链接下划线 ...
从源代码中加载res / values / dimension.xml中的维度值
本文翻译自:Load dimension value from res/values/dimension.xml from source code I'd like to load the value ...
高德地图中加载three.js（vue中）（封装
这几天公司有一个要结合高德地图的智慧园区的项目(大致就是在3d地图中加载自己的three.js模型) 1.首先要引入高德地图官方文档给出来的引用方法 <template><div ...
python中for循环流程图_Python While循环语句实例演示及原理解析
这篇文章主要介绍了Python While循环语句实例演示及原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Python 编程中 while ...
html title中加图标,科技常识：HTML中title前面小图标的实现_如何给网页标题添加icon小图标...
今天小编跟大家讲解下有关HTML中title前面小图标的实现_如何给网页标题添加icon小图标 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML中title前面小图标的实现_如何给网 ...
pdf在html中加载不出来,在网页中打开显示PDF
在这里呢,本站仅为大家讲解在网页中显示PDF文件的简单方法,注意,是简单方法,同时,本站已验证过如下的相关代码,测试已通过. 当然,有的朋友可能会问,是否能达到像百度文库那样在网页中显示PDF?回答是 ...
html怎么在字体中加波浪线,CSS3实现文字波浪线效果
前言 css的设计之巧妙,实现之精妙,细细寻味,其妙非凡,妙不可言.这波浪线,取巧的运用了linear-gradient属性,合角度.颜色.位置于一体,配合background-size,backgr ...

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

html网页中加五角星,使用css3在网页中实现五角星样式（原理解析）相关推荐

最新文章

热门文章