参考资料：http://blog.csdn.net/fense_520/article/details/37892507

本文非转载。为个人原创，转载请先联系博主，谢谢~

准备：

<!DOCTYPE html>

<head>

<meta charset="UTF-8">

<title>- UED - </title>

<style type="text/css" src="css/style.css"></style>

<script type="text/javascript" src="js/ext.js"></script>

</head>

<div class="xxx"></div>

xxx按需更改 

div { background:black;}

好。我们開始绘图吧！

1. 矩形

.rectangle { width:100px; height:100px;}

2. 圆形

.circle { width:100px; height:100px; border-radius:50px;}

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHpoX2xvb3A=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

图 1
3. 圆柱形
.cylinder {width:100px; height:100px; border-radius:100px/50px;}

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHpoX2xvb3A=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHpoX2xvb3A=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

图 2-1 图2-2 图2-3
橙色为border-radius:100px/50px时的情况，紫色为border-radius:50px/100px的情况。值各自是水平半径和垂直半径。在正方形内圈出了一个圆柱形。能够发现，border-radius总保持它的圆心在中心了。

为什么不会是图2-2的样子呢<待解决1>？当我们设置border-radius:100px/100px的时候，你会惊奇地发现，它又变回一个圆形了。你会以为它是图2-3的样子的，但实际上不是。它跟图1的圆形一样大小，这又是为什么呢<待解决2>？

4. 椭圆形
.oval {width:200px; height:100px; border-radius:100px/50px;}

跟圆柱形差点儿相同，把正方形的宽扩张到200px，它正好容纳了那个椭圆。椭圆就是画出来的椭圆啦！

5. 三角形
[class^=triangle-] { width:0px; height:0px;}

先以上三角形为例：

.triangle-up { border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:100px solid red;}

这个三角形是怎么来的呢？我细细研究了一下。发现border之间有一条分界，而这条分界是45度倾斜的，如图-3，两border间有明显分界，这就是我们画三角形所要利用到的原理，上面已经设置width和height为0，这时两border交汇处就有一个由两个三角形组成的矩形啦，设置当中一个border为透明，就剩下一个三角形了。对，就是这么简单。那这个上三角形该怎么画？设置左右border和border-bottom，让左右border变透明。这时你们看到的上三角形事实上是由两个三角形组成的，如图-4。

其它种类的三角形类似，你看着哪几个border能组成这个三角形顺便调整一下border-width即可了。以前有一道笔试题——画出一条丝带，如今想想挺简单的，不就是一个黄色左三角形+黄色矩形+白色左三角形定位做成的嘛。例如以下：

div { float:left;}

#test { border-top:100px solid transparent; border-bottom:100px solid transparent; border-right:100px solid yellow;}

#test2 { width:800px; height:200px; background:yellow;}

#test3 { border-top:100px solid transparent; border-bottom:100px solid transparent; border-right:100px solid white; margin-left:-100px;}

图-3


图-4
6. 平行四边形——现成的属性——transform:skew(20deg) 左倾斜的意思
7. 梯形
事实上跟上面说的上三角形一个道理，只是设置它的width为100px，height为0，也就是两个三角形加一个width为100px，height为border-bottom宽度的矩形画成的。

8.六角星
.star-six { width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:100px solid red; position:relative;}

.star-six:after { width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-top:100px solid red; position:absolute; content:""; top:30px; left:-50px;}
第一行：建立一个上三角形，粉色部分（中间被遮挡了）。position为relative。
第二行：伪类的位置为absolute。因star-six类的宽高均为0。伪类的起始位置在图-5所看到的的圆圈中，要明确一个原理，若star-six宽高不为0，伪类块是在star-six内部的，由于分别设置了position为relative和absolute，这时两三角形组成了个平行四边形，这也算是画平行四边形的一种方法吧。当我尝试去掉position:absolute，发现伪类元素仅仅剩下左边的一半了，并且位于star-six元素的右上方。这是为什么<待解决3>？(before是在后面，而after是在前面的？真奇怪) 答：看走眼了。:after确实是在后面了。

接下来就是定位了top:30px; left:-50px; 将原三角形移动到绿色三角形所看到的位置，这时他们组成了一个六角形。
其它：content:""，这个一定要有。若没有就是normal了，网上看到有篇文章写到”content:normal将 :before 和 :after 伪元素计算成‘none’”，而content:none的伪元素是不会被生成的，关于content属性，我也不太懂，各位自行查找资料。

图-5
9. 五角星
.star-five { margin:50px 0; position:relative; width:0px; height:0px; border-left:100px solid transparent; border-right:100px solid transparent; border-bottom:70px solid red;

    -webkit-transform:rotate(35deg);

       -moz-transform:rotate(35deg);

        -ms-transform:rotate(35deg);

         -o-transform:rotate(35deg); }

.star-five:before { border-bottom:80px solid orange; 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 { border-bottom:70px solid green; border-left:100px solid transparent; border-right:100px solid transparent; position:absolute; display:block; color:red; top:3px; left:-105px; width:0px; height:0px; content:'';

    -webkit-transform:rotate(-70deg);

       -moz-transform:rotate(-70deg);

        -ms-transform:rotate(-70deg);

         -o-transform:rotate(-70deg); }

使用前面的提到的方法，分别绘制三角形再旋转和定位而成。代码所看到的，:before伪类元素画出的是五角星顶部的小三角形。我们也能够把:before画成跟star-five和:after一样大小的三角形再旋转定位。

10. 五角大楼（或者说是五边形）——由两个梯形组成（或者你用各种奇形怪状拼凑），没什么好说的了。

11. 六边形 = 上三角形 + 矩形 + 下三角形
12. 八边形 = 上梯形 + 矩形 + 下梯形
13. 爱心 = 两个拥有两圆角的矩形，如图-6。（transform-oritin定义旋转的基准点，对rotate属性起作用）

图-6
14. 无穷符号 = 两个矩形（分别拥有3个圆角和一个直角）
15. 鸡蛋 =  一个带圆角的矩形
16. 药丸
.pill { width:0px; height:0px; border-right:60px solid transparent; border-top:60px solid red; border-bottom:60px solid red; border-radius:60px;}
图-7
这个我也不知道是怎么形成的。照理说。它仅仅有上边、下边和右边的相交部分，border-xxx-left应该没作用才是，但他又确实起作用了，对这个变化有点纳闷。如图-7后两步<待解决4>。
17. 对话框 = 圆角矩形 + 左三角形
18. 钻石 = 梯形 + 下三角形


我认为用css3绘图形在实际应用中没什么大的用处，纯属用来练手好了（也许还能够应付几道笔试题呢）。

最后，谢谢你认真看完了。不足之处，欢迎指出。顺便帮我解答几个待解决这个问题。


完整代码：
div { background:black;}

/*矩形*/

.rectangle { width:100px; height:100px;}

/*圆形*/

.circle { width:100px; height:100px; border-radius:50px;}

/*图柱形*/

.cylinder {width:100px; height:100px; border-radius:100px/50px;}

/*椭圆形*/

.oval {width:200px; height:100px; border-radius:100px/50px;}

/*各种三角形*/

[class^=triangle-] { width:0px; height:0px;}

.triangle-up { border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:100px solid red;}

.triangle-down { border-left:50px solid transparent; border-right:50px solid transparent; border-top:100px solid red;}

.triangle-equal { border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:50px solid red;}

.triangle-left { border-top:50px solid transparent; border-right:100px solid red; border-bottom:50px solid transparent;}

.triangle-right { border-top:50px solid transparent; border-left:100px solid red; border-bottom:50px solid transparent;}

.triangle-left-up { border-top:100px solid red; border-right:200px solid transparent;}

.triangle-right-up { border-top:100px solid red; border-left:200px solid transparent;}

.triangle-left-down { border-bottom:100px solid red; border-right:200px solid transparent;}

.triangle-right-down { border-bottom:100px solid red; border-left:200px solid transparent;}

/*平行四边形*/

.parallelogram { width:150px; height:100px; margin-left:20px;

    -webkit-transform: skew(20deg);

       -moz-transform: skew(20deg);

         -o-transform: skew(20deg); }

/*梯形*/

.trapezoid { width:100px; height:0px; border-bottom:100px solid red; border-left:50px solid transparent; border-right:50px solid transparent;}

/*六角星*/

.star-six { width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:100px solid red; position:relative;}

.star-six:after { width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-top:100px solid red; position:absolute; content:""; top:30px; left:-50px;}

/*五角星*/

.star-five { margin:50px 0; position:relative; width:0px; height:0px; border-left:100px solid transparent; border-right:100px solid transparent; border-bottom:70px solid red;

    -webkit-transform:rotate(35deg);

       -moz-transform:rotate(35deg);

        -ms-transform:rotate(35deg);

         -o-transform:rotate(35deg); }

.star-five:before { border-bottom:80px solid orange; 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 { border-bottom:70px solid green; border-left:100px solid transparent; border-right:100px solid transparent; position:absolute; display:block; color:red; top:3px; left:-105px; width:0px; height:0px; content:'';

    -webkit-transform:rotate(-70deg);

       -moz-transform:rotate(-70deg);

        -ms-transform:rotate(-70deg);

         -o-transform:rotate(-70deg); }

/*五角大楼*/

.pentagon { position:relative; width:54px; border-width:50px 18px 0; border-style:solid; border-color:red transparent;}

.pentagon:before { content:""; position:absolute; height:0; width:0; top:-85px; left:-18px; border-width:0 45px 35px; border-style:solid; border-color:transparent transparent red;}

/*六边形*/

.hexagon { width:100px; height:55px; background:red; position:relative;}

.hexagon:before { content:""; position:absolute; top:-25px; left:0; width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:25px solid red;}

.hexagon:after { content:""; position:absolute; bottom:-25px; left:0; width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-top:25px solid red;}

/*八边形*/

.octagon { width:100px; height:100px; background:red; position:relative;}

.octagon:before { content:""; position:absolute; top:0; left:0; border-bottom:29px solid red; border-left:29px solid #eee; border-right:29px solid #eee; width:42px; height:0;}

.octagon:after { content:""; position:absolute; bottom:0; left:0; border-top:29px solid red; border-left:29px solid #eee; border-right:29px solid #eee; width:42px; height:0;}

/*爱心*/

.heart { position:relative; width:100px; height:90px;}

.heart:before { 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; content:""; position:absolute; 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: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 { width:60px; height:60px; border:20px solid red; content:""; position:absolute;

    -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 { right:auto; width:60px; height:60px; border:20px solid red; content:""; position:absolute;

    -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 { width:126px; height:180px; background-color:red;

    -webkit-border-radius:63px 63px 63px 63px/108px 108px 72px72px;

            border-radius:50% 50% 50% 50%/60% 60% 40% 40%; }

/*药丸*/

.pill { width:0px; height:0px; border-right:60px solid transparent; border-top:60px solid red; border-bottom:60px solid red;

    border-top-left-radius:60px;

    border-top-right-radius:60px;

    border-bottom-left-radius:60px;

    border-bottom-right-radius:60px; }

/*对话框*/

.talkbubble { width:120px; height:80px; background:red; position:relative;

    -webkit-border-radius:10px;

       -moz-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;}

/*钻石*/

.cut-diamond { border-style:solid; border-color:transparent transparent red transparent; border-width:0 25px 25px 25px; height:0; width:50px; position:relative; margin:20px 0 50px 0;}

.cut-diamond:after { content:""; position:absolute; top:25px; left:-25px; width:0; height:0; border-style:solid; border-color:red transparent transparent transparent; border-width:70px 50px 0 50px;}

版权声明：本文博客原创文章，博客，未经同意，不得转载。

使用CSS3制图的更多相关文章

  1. CSS3 chart

    利用CSS3技术生成统计图. 原理:利用元素的百分比算出旋转度数.类似于斗地主时,手拿扑克牌的形状. 程序源码: <!DOCTYPE html> <html> <head ...

  2. CSS Sprites+CSS3 Icon Font

    CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...

  3. CSS3 2D Transform

    在 一个二维或三维空间,元素可以被扭曲.移位或旋转.只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴:而3D变形工作在X轴和Y轴之外, 还有一个Z轴.这些3D变换不仅可以定义元素的长度和 ...

  4. 8个超炫酷的纯CSS3动画及源码分享

    在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...

  5. 7款纯CSS3实现的炫酷动画应用

    1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...

  6. 再说CSS3渐变——线性渐变

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  7. CSS3渐变——线性渐变

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  8. css3动画贝塞尔曲线cubic-bezier，css3动画的五种情况

    当大家开始做css3动画的时候,了解贝塞尔曲线就成了不可或缺的.“贝赛尔曲线”是由法国数学家Pierre Bézier所发明,由此为计算机矢量图形学奠定了基础.它的主要意义在于无论是直线或曲线都能在数 ...

  9. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

随机推荐

  1. Android菜鸟的成长笔记（3）——给QQ登录界面说So Easy

    原文:Android菜鸟的成长笔记(3)--给QQ登录界面说So Easy 上一篇:Android菜鸟的成长笔记(2)--第一个Android应用 我们前面已经做了第一个Android应用程序,虽然有 ...

  2. 与众不同 windows phone (13) - Background Task（后台任务）之后台文件传输（上传和下载）

    原文:与众不同 windows phone (13) - Background Task(后台任务)之后台文件传输(上传和下载) [索引页][源码下载] 与众不同 windows phone (13) ...

  3. 【设计模式】Singleton模式C++实现

    Singleton是设计模式中比较简单的一个.园中的朋友们应该都很熟悉了.前段时间参加xxx外企的面试,和面试官讨论C++的时候正好写了一个.当时由于在有些地方考虑不太周全,代码出现了一些疏漏.不过最 ...

  4. 理想非常丰满，现实非常骨感——致WiFi通话

    WiFi通话一词,近来火热,国外,iOS 8系统測试版新增WiFi通话功能,英国运营商也着手WiFi免费通话,国内也没落下,阿里发布的170资费方案中就包含WiFi免费通话. 近日,据外媒报道,在美国 ...

  5. Android：通知栏的使用

    非常久没有使用Android的通知功能了,今天把两年前的代码搬出来一看.发现非常多方法都废弃了,代码中各种删除线看的十分不爽.于是乎,打开Google,查看官方文档.学习最新的发送通知栏消息的方法. ...

  6. ThinkPhp学习09

    原文:ThinkPhp学习09 三.区间查询 $data['id']=array(array('gt',4),array('lt',10));//默认关系是 and 的关系 //SELECT * FR ...

  7. Queue 消息的发送与接收(PTP 消息传递模型)

    上篇博客写到了JMS两种消息模型(P2P.pub/sub)<JMS两种消息模型>.本篇博客通过一个实例来进一步了解P2P模型. Queue消息的发送与接收--PTP消息传递模型,样例: Q ...

  8. delphi 自我删除和线程池（1000行代码，需要仔细研究）

    unit Unit4; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  9. How-To: add EPEL repository to Centos 6.x is Easy!

    How-To: add EPEL repository to Centos 6.x is Easy! | ITek Blog How-To: add EPEL repository to Centos ...

  10. Android资源文件及文件夹介绍

    在Android项目文件夹里面,主要的资源文件是放在res文件夹里面的 1:assets文件夹是存放不进行编译加工的原生文件,即该文件夹里面的文件不会像xml,java文件被预编译,可以存放一些图片, ...