怎样使用纯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框架的核心配置文 ...
随机推荐
- 3ds Max修改桌面快捷方式为中文语言
通过上篇教程的学习,我们已经会切换3ds Max 2018的界面语言了,相关内容可参阅3ds Max如何设置中文界面.但是如果每次都要从开始菜单进行操作,岂不麻烦?简单一点,可以在桌面添加3ds Ma ...
- CF666E Forensic Examination 广义后缀自动机_线段树合并_树上倍增
题意: 给定一个串 $S$ 和若干个串 $T_{i}$每次询问 $S[pl..pr]$ 在 $Tl..Tr$ 中出现的最多次数,以及出现次数最多的那个串的编号. 数据范围: 需要离线 题解:首先,很常 ...
- 对同层数据进行处理,做成树状图形式的数据结构,并符合elementui中的tree结构
//通过子级的pid找到父级对应的id,制作树状图 var data = [ { id: 1, name: "办公管理", pid: 0 }, { id: 2, name: &qu ...
- POJ-2240 Arbitrage BellmanFord查可循环圈
题目链接:https://cn.vjudge.net/problem/POJ-2240 题意 套利(Arbitrage)就是通过不断兑换外币,使得自己钱变多的行为 给出一些汇率 问能不能套利 思路 马 ...
- Uart,IIC和SPI的区别
1.UART, SPI, IIC的详解 UART.SPI.IIC是经常用到的几个数据传输标准,下面分别总结一下: UART(Universal Asynchronous Receive Transmi ...
- Echache整合Spring缓存实例讲解
摘要:本文主要介绍了EhCache,并通过整合Spring给出了一个使用实例. 一.EhCache 介绍 EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点,是Hibernate中 ...
- 想做web前端project师应该学习些什么?
偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...
- Invalid property 'sentinels' of bean class redis spring 错误修改
/* * Copyright 2014-2015 the original author or authors. * * Licensed under the Apache License, Vers ...
- GetKeyState(), GetAsyncKeystate(), GetKeyboardSlate()
GetKeyState.GetAsyncKeyState.GetKeyboardState函数的差别: 1.BOOL GetKeyboardState( PBYTE lpKeyState );获得全部 ...
- Effective JavaScript Item 49 对于数组遍历,优先使用for循环,而不是for..in循环
本系列作为Effective JavaScript的读书笔记. 对于以下这段代码,能看出最后的平均数是多少吗? var scores = [98, 74, 85, 77, 93, 100, 89]; ...