CSS3 图形
圆:
#circle { width: 140px; height: 140px; background: red; -moz-border-radius: 70px; -webkit-border-radius: 70px; border-radius: 70px; }
正方形:
#square { width: 140px; height: 140px; background: blue; }
椭圆:
#oval { width: 200px; height: 100px; background: purple; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; }
上三角形:
#up-triangle { width: 0; height: 0; border-bottom: 120px solid green; border-left: 60px solid transparent; border-right: 60px solid transparent; }
下三角形:
#down-triangle { width: 0; height: 0; border-top: 80px solid pink; border-left: 60px solid transparent; border-right: 60px solid transparent; }
左三角形:
#left-triangle { width: 0; height: 0; border-right: 100px solid orange; border-top: 50px solid transparent; border-bottom: 50px solid transparent; }
右三角形:
#right-triangle { width: 0; height: 0; border-left: 100px solid red; border-top: 50px solid transparent; border-bottom: 50px solid transparent; }
梯形:
#trapezium { height: 0; width: 80px; border-bottom: 80px solid blue; border-left: 40px solid transparent; border-right: 40px solid transparent; }
菱形:
#diamond { width: 80px; height: 80px; background: purple; margin: 3px 0 0 30px; /* Rotate */ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); /* Rotate Origin */ -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; }
长方形:
#rectangle { width: 140px; height: 80px; background: green; }
平行四边形:
#parallelogram { width: 130px; height: 75px; background: pink; /* Skew */ -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); transform: skew(20deg); }
多边形:
#twelve-point-star { height: 100px; width: 100px; background: orange; position: absolute; } #twelve-point-star:before { height: 100px; width: 100px; background: orange; content:""; position: absolute; /* Rotate */ -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); } #twelve-point-star:after { height: 100px; width: 100px; background: orange; content:""; position: absolute; /* Rotate */ -moz-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg); }
多边形:
#six-point-star { position: absolute; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 80px solid red; } #six-point-star:after { content:""; position: absolute; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 80px solid red; margin: 30px 0 0 -50px; }
多边形3:
#octagon { width: 100px; height: 100px; background: blue; } #octagon:before { height: 0; width: 40px; content:""; position: absolute; border-bottom: 30px solid blue; border-left: 30px solid white; border-right: 30px solid white; } #octagon:after { height: 0; width: 40px; content:""; position: absolute; border-top: 30px solid blue; border-left: 30px solid white; border-right: 30px solid white; margin: 70px 0 0 0; }
提示:
#speech-bubble { width: 120px; height: 80px; background: purple; position: absolute; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } #speech-bubble:before { content:""; position: absolute; width: 0; height: 0; border-top: 13px solid transparent; border-right: 26px solid purple; border-bottom: 13px solid transparent; margin: 13px 0 0 -25px; }
鸡蛋:
#egg { display:block; width:126px; /* width has to be 70% of height */ /* could use width:70%; in a square container */ height:180px; background-color:green; /* beware that Safari needs actual px for border radius (bug) */ -webkit-border-radius:63px 63px 63px 63px/ 108px 108px 72px 72px; /* fails in Safari, but overwrites in Chrome */ border-radius:50% 50% 50% 50%/60% 60% 40% 40%; }
等边三角形:
#eq-triangle { width: 0; height: 0; border-bottom: 104px solid navy; /* 104 = 120 * 0.866 */ border-left: 60px solid transparent; border-right: 60px solid transparent; }
不完整圆:
.pacman { width: 0px; height: 0px; border-right: 60px solid transparent; border-top: 60px solid yellow; border-left: 60px solid yellow; border-bottom: 60px solid yellow; border-top-left-radius: 60px; border-top-right-radius: 60px; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; }
圆相关:
.biohazard { width: 0; height: 0; border-bottom: 60px solid black; border-top: 60px solid black; border-left: 60px solid yellow; border-right: 60px solid yellow; -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius: 60px; }
心形:
#heart { position: relative; } #heart:before, #heart:after { position: absolute; content: ""; left: 70px; top: 0; width: 70px; height: 115px; 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%; }
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2013年2月1日 11:32:40 星期五
相关推荐
CSS3图形处理与动画.pdf
CSS3图形处理与动画
非常实用的特效代码,可以完美运行,可以二次修改!
卡通星球行星CSS3图形特效是一款类似玻璃透明的行星天体图形,八大行星图形,银河系八大天体图形特效。
纯css3绘制各种图形图标样式代码
利用CSS3绘制出的图形的一个集合是一个资源哦 不容错过
是利用CSS代码方便的写出各种图形的汇总,制作手机页面时十分方便,因为没有兼容性问题
CSS3奇思妙想,单标签实现各类图形
现在,我们已经可以使用CSS 3 常见不规则复杂图形了,如下图所示: 使用CSS创建的图形,无法内置文字或实现文字环绕效果。因此,如何实现不规则图形和文字复杂布局也成为了一个热议话题。 今天我们就来介绍一下如何...
CSS3绘制各种图形图标样式特效是一款无需任何图片即可实现逼真的图形图标特效。
CSS3实现图形颜色渐变 CSS3实现图形颜色渐变效果网页特效.zip
CSS3确实非常强大,我们之前也领略过CSS3绘制的各种图形和实现的各种动画,比如非常逼真的CSS3人物行走动画,也比如这100多个纯CSS3动画图标。今天要分享的是用纯CSS3绘制的50多个图形和图标,有些图形还带有动画...
纯css3实现各种图形样式是一款纯css3样式属性制作各种图形图标样式代码。
纯CSS3几何图形上升动画特效是一款适合做网页背景动画特效。
纯CSS3制作动态3D柱状图形数据表
以图形方式快速设计动画,获取生成CSS,然后开始! 要了解如何使用该应用程序,请在本地运行(请参见下文)或访问并单击“?”。 手册标题中的图标。 本地安装 克隆此仓库并安装依赖项: npm install 要运行该应用...
css3绘图制作css3响应式组织架构图形代码
纯css绘制几何图形,三角形、圆形(半圆、1/4圆)、多边形(平行四边形、梯形、五边形、六边形、八边形)