Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > 如何使用纯CSS3创建一个简单的五角星图形_html/css_WEB-ITnose

如何使用纯CSS3创建一个简单的五角星图形_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 11:26:14
Original
1738 people have browsed it

我们可以使用SVG、Canvas、CSS3或者背景图片来实现五角星图案及其悬停效果。

CSS3引入的伪元素和变换特性使得实现五角星图形非常简单，并且可以结合渐变实现更为漂亮的效果。
因此使用图片实现五角星已经毫无必要（图片占用额外的请求，且数据量大。除非要支持低版本的桌面IE浏览器）。

首先我们创建一个三角形，这通常是使用带大尺寸边线而零内容尺寸的元素来实现，代码示范： 
.tri {    width: 0;    height: 0;    border-left: 15px solid transparent;    border-right: 15px solid transparent;    border-bottom: 30px solid red;}
Copy after login
第二步，我们使用伪元素: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;}
Copy after login
然后，我们在上述2个伪元素上分别应用不同的旋转变换： 
.tri:before {    transform: rotate(70deg);}.tri:after {    transform: rotate(-70deg);}
Copy after login

这样我们就实现了一个五角星图形（图标）。我们可以用类似的方法实现更多的几何形状。

你可以通过在线实例自己试试看：http://wow.techbrood.com/fiddle/10258

你还可以先思考下如何实现带边线和渐变效果的三角形，再参考下这个实现：http://wow.techbrood.com/fiddle/16978


by iefreer


Related labels：
如何使用纯CSS3创建一个简单的五角星图形
source：php.cn
Previous article：HTML5_html/css_WEB-ITnose Next article：CSS中display/float/position属性值的相互影响_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
3
2324
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2457
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
2074
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1958
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
2027
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template