怎样使用纯CSS3创建一个简单的五角星图形
我们能够使用SVG、Canvas、CSS3或者背景图片来实现五角星图案及其悬停效果。
CSS3引入的伪元素和变换特性使得实现五角星图形很easy,而且能够结合渐变实现更为美丽的效果。
因此使用图片实现五角星已经毫无必要(图片占用额外的请求。且数据量大。除非要支持低版本号的桌面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
怎样使用纯CSS3创建一个简单的五角星图形的更多相关文章
- 如何创建一个简单的C++同步锁框架(译)
翻译自codeproject上面的一篇文章,题目是:如何创建一个简单的c++同步锁框架 目录 介绍 背景 临界区 & 互斥 & 信号 临界区 互斥 信号 更多信息 建立锁框架的目的 B ...
- 如何创建一个简单的Visual Studio Code扩展
注:本文提到的代码示例下载地址>How to create a simple extension for VS Code VS Code 是微软推出的一款轻量级的代码编辑器,免费,开源,支持多种 ...
- 《Entity Framework 6 Recipes》翻译系列 (3) -----第二章 实体数据建模基础之创建一个简单的模型
第二章 实体数据建模基础 很有可能,你才开始探索实体框架,你可能会问“我们怎么开始?”,如果你真是这样的话,那么本章就是一个很好的开始.如果不是,你已经建模,并在实体分裂和继承方面感觉良好,那么你可以 ...
- Windows 8.1 应用再出发 (WinJS) - 创建一个简单项目
前面几篇我们介绍了如何利用 C# + XAML 完成Windows Store App 功能的实现,接下来的几篇我们来看看如何利用 Html + WinJS 来完成这些功能. 本篇我们使用WinJS ...
- 纯 CSS 创建一个三角形
[要求]:用纯CSS创建一个三角形的原理是什么? ♪ 答: 把上.左.右三条边隐藏掉(颜色设为 transparent) [实现]: #demo { width: 0; height: 0; bord ...
- ADF_General JSF系列1_创建一个简单的JSF Application
2015-02-17 Creatd By BaoXinjian
- IntelliJ IDEA 15 部署Tomcat及创建一个简单的Web工程
一.部署Tomcat 二.创建一个简单的Web工程 2.1创建一个新工程 创建一个新工程 设置JDK及选择Web Application (创建的是Web工程) 点击Next,选择工作空间,起个工程名 ...
- Symfony2之创建一个简单的web应用
Symfony2——创建bundle bundle就像插件或者一个功能齐全的应用,我们在应用层上开发的应用的所有代码,包括:PHP文件.配置文件.图片.css文件.js文件等都会包含在bu ...
- 如何创建一个简单的struts2程序
如何创建一个简单的Struts2程序 “计应134(实验班) 凌豪” 1.创建一个新的Web项目test(File->new->Web Project) 2.Struts2框架的核心配置文 ...
随机推荐
- SpringBoot学习笔记(14)----应用监控-HTTP方式
SpringBoot提供了三种应用监控的方式 通过HTTP(最简单方便) 通过JMX 通过远程shell 这里就是用最简单的方式来使用SpringBoot的应用监控 首先引入依赖,pom文件如下 &l ...
- ZBrush中Zproject与SubTool的综合应用
在ZBrush中有很多工具也需要配合子物体工具来使用,如笔刷中的Zproject(投射笔刷)就需要子物体工具来配合使用,本文将讲解一下它的用法. 1. 首先创建一个平面,在Tool(工具)面板中选择P ...
- python编程基础
Date: 2019-05-27 Author: Sun 1. 程序 为了完成某种特定功能,以某种程序设计语言编写的有序指令的集合.程序是指挥cpu工作的"工作手册".计算机只能执 ...
- TP框架传值
/*TP框架传值*/ location.href = "../add/add/department/"+department+"/username/"+user ...
- 关于python return 和 print 的区别
概念上一个是 返回值 一个是打印输出 区别一:return是结束语一般放在函数的最后,当你在return 结束后面再写一些东西是不执行的如 下 def renshu(x,y): h=x+y pri ...
- asp.net 缓存公共类
using System; using System.Collections.Generic; using System.Text; using System.Web; using System.We ...
- [MST] Create an Entry Form to Add Models to the State Tree
It is time to add new entries to the wishlist. We will achieve this by reusing forms and models we'v ...
- Unity渲染
我们先大概了解一下对渲染的优先级有影响的几个因素 1.Camera.Depth 不同相机的深度,在渲染顺序的优先度里面是最高的,Depth越大,渲染的图像越靠前 2.Render.SortingOrd ...
- xp秘钥
TDCXC-M9FW9-3HQ28-CPXYR-YXQ3QCCBDF-9W9T8-K8B7M-83HJM-X2MCWP3MF6-BTDKT-KR7YF-X4BM9-4HD9TMCCWF-42JGF-W ...
- 36.创建自定义的指令directive
转自:https://www.cnblogs.com/best/tag/Angular/ 1. <html> <head> <meta charset="utf ...