结合伪元素实现的纯CSS3高级图形绘制

　    自小编上次整理了一些基础图形的绘制方法之后，大家都纷纷表示对css3的绘图技巧学习很有帮助。虽说万变不离其宗，再复杂的图形也可以用最简单的三角形或者圆弧组合出来，但仍有不少朋友反映，学会基本图形也不懂得怎样组合，也不知道什么时候用伪元素比较合适。所以今天小编来一篇相对复杂的图形绘制教程，大家看过之后就会发现，很多看似复杂的图形（比如下图这样的），换一下组合方式就会变得简单很多。

　　如果你觉得以上图形无从下手，或者觉得需要用很多个html元素来完成的话，那相信本教程对你的帮助会非常大。

　　现在我们先来编写基础的html代码:

　　后面我们只要往里面填充样式和元素即可测试效果。

　　我们先来看一个比较简单的形状，鸡蛋。可别小看它，想当年达芬奇光画这个鸡蛋都练了不知道多少年，所以大家也来学画蛋吧，以后当上一名CSS3画家。

　　上次我们学习了绘制椭圆的方法，乍一看似乎在椭圆基础上进行修改即可获得正确的效果。但之所以能绘制出椭圆，其原因在于border-radius使用了百分比，而在一个角里面，x和y的百分比始终相等。

　　举个例子，一个矩形的宽度为30px，高度为40px，如果我们让一个角的圆角半径等于50%，那么圆角在x方向上的半径等于15px，y方向上的半径等于20px，若为40%，则x方向半径等于12px，y方向半径等于16px，x和y的比例始终等于矩形的宽高比3:4。所以，你希望x方向上的半径等于15px，y方向上的半径等于30px，那用上次的方法是绝对不可能做到的。

　　对于这个蛋来说，我们不难发现x方向上的圆角半径都刚好等于宽度的一半，也就是50%，但是y方向就不一样了，上面两个角的半径明显大于下面两个角。假设上面的圆角半径是60%，那么下面的圆角半径就是40%了，这样就可以确保圆角之间没有直线连接。

　　那么问题来了，我们要实现的就是左上角的圆角半径在x方向上等于50%，在y方向上等于60%，又该怎样实现呢？

　　这里小编给大家介绍圆角半径的另一个用法——通过斜杠分开x和y方向的圆角半径。

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

　　其中，/前面的部分代表x方向上的4个半径，顺序依次为左上，右上，右下，左下（从左上顺时针排下来即可），自然而然地就会想到/后面的部分就代表y方向上的4个半径，顺序跟x方向的一样。可见左上和右上的半径都是60%，而左下和右下则均为40%。

　　下面给出完整的代码，HTML部分就一个div

　　CSS代码如下:

　　.egg{

　　display:block;

　　width:126px;

　　height:180px;

　　background-color:red;

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

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

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

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

　　}

　　接下来我们看看下面的这个图形，非常经典的吃豆豆游戏主角。

　　学过基本图形绘制的朋友可能会想到用三角形擦除一个圆形来得到上图的形状。嗯，这确实是一个方法，但局限性相当明显，因为CSS3不存在真正意义上的擦除。所谓的“擦除”，仅仅是用跟背景一样的颜色进行填充而已，如果背景图不是透明的话，那这种做法就白搭了。

　　这里我们换个思路，首先我们知道画三角形用的是很粗的边框，然后利用转角处的交界线生成三角形。

　　所以第一步，我们先让整个div的宽高等于0，然后设置很粗的边框。

　　HTML代码:

　　CSS代码:

　　.pacman{

　　width:0px;

　　height:0px;

　　border:60px solid red;

　　}

　　效果如下图所示，显示出来的是一个正方形，但实际上它没有宽高，都是边框在撑着。

　　根据前面介绍的原理，这个“正方形”其实是4个三角形拼接的结果。

　　这样的话，我们自然而然地就想到隐藏掉右侧的边框线，尝试设置为0。

　　由于4条边不对等了，所以我们拆分一下。

　　.pacman{

　　width:0px;

　　height:0px;

　　border-right:0 solid red;

　　border-top:60px solid red;

　　border-left:60px solid red;

　　border-bottom:60px solid red;

　　}

　　运行效果如下图所示:

　　由于失去了右边线的支撑，右侧全部被截没了，看来60px还得保留，但是又不能显示出来，怎么办？你可能会想到用跟背景一样的颜色来模拟隐藏，但更好的方法是设置为transparent（透明），这样才会让图形适用于所有背景（包括图片背景）。

　　.pacman{

　　width:0px;

　　height:0px;

　　border-right:60px solid transparent;

　　border-top:60px solidred;

　　border-left:60px solidred;

　　border-bottom:60px solidred;

　　}

　　再次运行，效果就对了:

　　这时候，貌似把直角换成圆角就能得到正确的效果，我们不妨试试，圆角半径就等于边框的粗细。

　　.pacman{

　　-webkit-border-radius:60px;

　　-moz-border-radius:60px;

　　-o-border-radius:60px;

　　border-radius:60px;

　　}

　　运行效果如下图所示，果然正确了:

　　最后我们来看看这个。天哪，数一数，12个三角形，伪元素怎么塞都塞不进啊。

　　CSS3初学者会很容易被复杂的表象所迷惑，这往往是因为制作者在图形结构分析方面的经验不足，无法找出多个“元素”之间的内在联系进行重组。听起来好像很玄乎，那么，小编就画一个“线稿”给大家看一下吧。

　　哈哈，这样是不是就恍然大悟了呢？12个角，竟然就是3个旋转角度不同的正方形重叠所得。这样的话，总的元素数量也就3个。加上before和after伪元素的支持，这么“复杂”的图形也就只需一个HTML元素就能搞定。

　　正方形每旋转90度就重合一次，所以3个元素分下来，就是一个元素不旋转，然后一个旋转30度，一个旋转60度。而旋转可以通过CSS3的transform属性轻松实现。

　　HTML代码如下:

　　然后用CSS定义基本形状，它不旋转:

　　.burst-12{

　　background:red;

　　width:80px;

　　height:80px;

　　position:relative;

　　text-align:center;

　　}

　　3个元素需要重叠，因此要设置相对定位。

　　然后，两个伪元素的形状跟burst-12完全一致，不同的只是要绝对定位，所以before和after伪元素可以一起定义。

　　.burst-12:before,.burst-12:after{

　　content:"";

　　position:absolute;

　　top:0;

　　left:0;

　　height:80px;

　　width:80px;

　　background:red;

　　}

　　最后，我们让before旋转30度，after旋转60度，效果就完成了。

　　.burst-12:before{

　　-webkit-transform:rotate(30deg);

　　-moz-transform:rotate(30deg);

　　-ms-transform:rotate(30deg);

　　-o-transform:rotate(30deg);

　　}

　　.burst-12:after{

　　-webkit-transform:rotate(60deg);

　　-moz-transform:rotate(60deg);

　　-ms-transform:rotate(60deg);

　　-o-transform:rotate(60deg);

　　}

　　小编相信，只要用心学习，技术再菜的童鞋也能照着教程把里面的图形全部绘制出来。然而要是换成其它图形，我想还是会有人说画不出来，或者要绕很大一个圈子才能做得到。这也是情理之中的事情，毕竟这当中的技巧没有一般的规律可循，更多的是经验的积累。所以要在实战用运用自如，除了熟悉一些常用的手法之外，还要多参考成功的案例，从中获取更多的灵感。