纯CSS3实现绘制各种图形实现代码详细整理


Posted in HTML / CSS onDecember 26, 2012

请在现代浏览器(IE9+、firefox、chrome、safari、opera等浏览器)中查看效果:

 

复制代码
代码如下:
#circle {width: 100px;height: 100px;background: red;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;}
 

复制代码
代码如下:
#oval {width: 200px;height: 100px;background: red;-moz-border-radius: 100px / 50px;-webkit-border-radius: 100px / 50px;border-radius: 100px / 50px;}
 

复制代码
代码如下:
#triangle-up {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;}
 

复制代码
代码如下:
#triangle-down {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 100px solid red;}
 

复制代码
代码如下:
#triangle-left {width: 0;height: 0;border-top: 50px solid transparent;border-right: 100px solid red;border-bottom: 50px solid transparent;}
 

复制代码
代码如下:
#triangle-right {width: 0;height: 0;border-top: 50px solid transparent;border-left: 100px solid red;border-bottom: 50px solid transparent;}
 

复制代码
代码如下:
#triangle-topleft {width: 0;height: 0;border-top: 100px solid red;border-right: 100px solid transparent;}
 

复制代码
代码如下:
#triangle-topright {width: 0;height: 0;border-top: 100px solid red;border-left: 100px solid transparent;}
 

复制代码
代码如下:
#triangle-bottomleft {width: 0;height: 0;border-bottom: 100px solid red;border-right: 100px solid transparent;}
 

复制代码
代码如下:
#curvedarrow { position: relative; width: 0; height: 0; border-top: 9px solid transparent; border-right: 9px solid red; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg);}#curvedarrow:after { content: ""; position: absolute; border: 0 solid transparent; border-top: 3px solid red; border-radius: 20px 0 0 0; top: -12px; left: -9px; width: 12px; height: 12px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);}
 

复制代码
代码如下:
#star-five { margin: 50px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg);}#star-five:before { border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg);}#star-five:after { position: absolute; display: block; color: red; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); content: '';}
 

复制代码
代码如下:
#heart { position: relative; width: 100px; height: 90px;}#heart:before,#heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%;}#heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%;}
 

复制代码
代码如下:
#infinity { position: relative; width: 212px; height: 100px;}#infinity:before,#infinity:after { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid red; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}#infinity:after { left: auto; right: 0; -moz-border-radius: 50px 50px 50px 0; border-radius: 50px 50px 50px 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
 

复制代码
代码如下:
#egg { display:block; width: 126px; height: 180px; background-color: red; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;}
 

复制代码
代码如下:
#talkbubble { width: 120px; height: 80px; background: red; position: relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}#talkbubble:before { content:""; position: absolute; right: 100%; top: 26px; width: 0; height: 0; border-top: 13px solid transparent; border-right: 26px solid red; border-bottom: 13px solid transparent;}
 

复制代码
代码如下:
#yin-yang {width: 96px;height: 48px;background: #eee;border-color: red;border-style: solid;border-width: 2px 2px 50px 2px;border-radius: 100%;position: relative;}#yin-yang:before {content: "";position: absolute;top: 50%;left: 0;background: #eee;border: 18px solid red;border-radius: 100%;width: 12px;height: 12px;}#yin-yang:after {content: "";position: absolute;top: 50%;left: 50%;background: red;border: 18px solid #eee;border-radius:100%;width: 12px;height: 12px;}
 

复制代码
代码如下:
#magnifying-glass{ font-size: 10em; /* This controls the size. */ display: inline-block; width: 0.4em; height: 0.4em; border: 0.1em solid red; position: relative; border-radius: 0.35em;}#magnifying-glass::before{ content: ""; display: inline-block; position: absolute; right: -0.25em; bottom: -0.1em; border-width: 0; background: red; width: 0.35em; height: 0.08em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);}
HTML / CSS 相关文章推荐
修复iPhone的safari浏览器上submit按钮圆角bug
Dec 24 HTML / CSS
深入CSS3 动画效果的总结详解
May 09 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 HTML / CSS
HTML5之SVG 2D入门5—颜色的表示及定义方式
Jan 30 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
h5网页水印SDK的实现代码示例
Feb 19 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 HTML / CSS
css3手动实现pc端横向滚动
Jun 21 HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
Dec 25 #HTML / CSS
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 #HTML / CSS
CSS3的Border-radius轻松制作圆角
Dec 24 #HTML / CSS
CSS3等相关属性制作分页导航实现代码
Dec 24 #HTML / CSS
使用CSS3的appearance属性改变任何元素的浏览器默认风格
Dec 24 #HTML / CSS
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 #HTML / CSS
修复iPhone的safari浏览器上submit按钮圆角bug
Dec 24 #HTML / CSS
You might like
用文本文件制作留言板提示(上)
2006/10/09 PHP
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
如何在PHP中生成随机数
2020/06/04 PHP
js类型检查实现代码
2010/10/29 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
jQuery on()绑定动态元素出现的问题小结
2016/02/19 Javascript
详解Javascript中的Object对象
2016/02/28 Javascript
js变量提升深入理解
2016/09/16 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
详解vue.js之props传递参数
2017/12/12 Javascript
Vue组件化开发思考
2018/02/02 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
详解Django框架中用context来解析模板的方法
2015/07/20 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
使用Python写一个小游戏
2018/04/02 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
vue路由实现登录拦截
2021/03/24 Vue.js
社区两委对照检查材料
2014/08/23 职场文书
活动新闻稿范文
2015/07/17 职场文书
基于Python实现对比Exce的工具
2022/04/07 Python
Go web入门Go pongo2模板引擎
2022/05/20 Golang