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

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

WBOY
WBOYOriginal
2016-06-24 11:26:141726browse

我们可以使用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;}
第二步,我们使用伪元素: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个伪元素上分别应用不同的旋转变换:
.tri:before {    transform: rotate(70deg);}.tri:after {    transform: rotate(-70deg);}

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

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

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


by iefreer


Statement:
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