超实用的CSS绘图方法，赶紧瞧瞧吧

　　以前绘制图形只能通过一些图像编辑软件实现，对于一些复杂且不规则的图形，绘制起来非常的麻烦。但是现在使用CSS3就不用担心这个问题，它有一个非常方便的作用，那就是我们可以利用它绘制各种各样的图形，不管是规则的图形还是不规则的图形，都可以利用CSS3进行绘制，可以降低我们使用图片的频率。

　　利用CSS3绘制图形，你只需要掌握一些新增的CSS属性，比如transform、border-radius等，一些绘制起来比较麻烦的图形也可以轻松实现。

　　更值得大家注意的是，CSS能够对网页中元素位置的排版进行像素级精确控制，用css制作的图片不仅加载速度更快，还可以通过代码控制图形的大小以及颜色，方便后期修改。下面就教大家用css来制作一些简单又实用的图形。


　　圆形是比较常见的一个图形，那么如何利用CSS进行绘制呢？我们先写一个div盒模块，再设置一个ID。

　　<div id="circle"></div> 

　　圆形很简单，让div盒模块宽高相等，然后设置border-radius属性为50%即可：

　　#circle{

　　width:150px;

　　height:150px;

　　background:#e4393c;

　　border-radius:50%;

　　}


　　正文形是最简单的了，只要设置宽高相等就可以了。

　　<div id="square"></div>

　　#square{

　　width:120px;

　　height:120px;

　　background:#99ffc0;

　　}


　　与正方形一样，CSS制作长方形也很简单，保证div模块的宽高不相等就行了：

　　<div id="rectangle"></div>

　　#rectangle{

　　width:220px;

　　height:120px;

　　background:#734490;

　　}


　　椭圆其实就是长方形的变身，只要在长方形的代码中把它变成加一个border-radius属性就可以了：

　　<div id="oval"></div>

　　#oval{

　　width:300px;

　　height:150px;

　　background:#e4393c;

　　border-radius:150px/75px;

　　}


　　三角形的制作，主要涉及到的知识点是border属性，只需要通过修改设置不同border的透明效果，就能实现出三角形状。此外，在制作三角形的过程中，宽度和高度都需要设置为0。

　　<div id="triangle"></div>

　　#triangle{

　　width:0;

　　height:0;

　　border-bottom:120px solid#e4393c;

　　border-left:60px solid transparent;

　　border-right:60px solid transparent;

　　}


　　原理相同，只不过设置的是border-top、border-left和border-right三条边的属性，反向设置，就是倒过来的三角形了，就不做多余的解释：

　　#triangle{

　　width:0;

　　height:0;

　　border-top:120px solid#CCFF66;

　　border-left:60px solid transparent;

　　border-right:60px solid transparent;

　　}


　　菱形看上去比较难，其实也很简单，只是把2个三角形接合在一起，就形成了菱形，这里要使用的是一个新的属性，叫transform，意为旋转，后面还有很多图形需要用到这个属性。

　　#diamond{

　　width:120px;

　　height:120px;

　　background:#CCFF66;

　　transform:rotate(-45deg);

　　transform-origin:0 10o%;

　　margin:60px 0 10px 310px;

　　}


　　梯形是三角形的一个变体，设置CSS梯形时，左右两条边设置为相等，并且给它设置一个宽度。

　　#trapezium{

　　height:0;

　　width:120px;

　　border-bottom:120px solid#CCFF66;

　　border-left:60px solid transparent;

　　border-right:60px solid transparent;

　　}


　　平行四边形也很简单，只是一个长方形，变倾斜了而已，先写一个长方形，再给它一个transform属性：

　　#parallelogram{

　　width:160px;

　　height:10opx;

　　background:#CCFF66;

　　transform:skew(30deg);

　　}


　　五角星是很复杂的图形，基本是css制作图形中最复杂的一个了。主要是通过使用transform属性和添加伪类的方式来实现的。

　　#star{

　　display:block;

　　width:0;

　　height:0;

　　margin:50px 0;

　　color:#fc2e5a;

　　position:relative;

　　border-right:1oopx solid transparent;

　　border-bottom:70px solid#fc2e5a;

　　border-left:1oopx solid transparent;

　　transform:rotate(35deg);

　　}

　　#star:before{

　　height:0;

　　width:0;

　　position:absolute;

　　display:block;

　　top:-45px;

　　left:-65px;

　　border-bottom:80px solid#fc2e5a;

　　border-left:30px solid transparent;

　　border-right:30px solid transparent;

　　content:'';

　　transform:rotate(-35deg);

　　}

　　#star:after{

　　content:'';

　　width:0;

　　height:0;

　　position:absolute;

　　display:block;

　　top:3px;

　　left:-105px;

　　color:#fc2e5a;

　　border-right:1oopx solid transparent;

　　border-bottom:70px solid#fc2e5a;

　　border-left:1oopx solid transparent;

　　transform:rotate(-70deg);

　　}

　　和五角星的制作方法不同，六角星形状的制作方法是操纵border属性来制作两半图形，然后合并它们。

　　#star_six{

　　width:0;

　　height:0;

　　display:block;

　　position:absolute;

　　border-left:50px solid transparent;

　　border-right:50px solid transparent;

　　border-bottom:1oopx solid#de34f7;

　　margin:10px auto;

　　}

　　#star_six_points:after{

　　content:"";

　　width:0;

　　height:0;

　　position:absolute;

　　border-left:50px solid transparent;

　　border-right:50px solid transparent;

　　border-top:1oopx solid#de34f7;

　　margin:30px 0 0-50px;

　　}

　　八角形不很常用，但制作的方法可以有很多种，这里的制作方法是，先通过制作两个大小相同的梯形，然后再通过两边添加三角形制作出来的。

　　#octagon{

　　width:1oopx;

　　height:1oopx;

　　background:#ac60ec;

　　position:relative;

　　}

　　#octagon:before{

　　content:"";

　　width:42px;

　　height:0;

　　position:absolute;

　　top:0;

　　left:0;

　　border-bottom:29px solid#ac60ec;

　　border-left:29px solid#f4f4f4;

　　border-right:29px solid#f4f4f4;

　　}

　　#octagon:after{

　　content:"";

　　width:42px;

　　height:0;

　　position:absolute;

　　bottom:0;

　　left:0;

　　border-top:29px solid#ac60ec;

　　border-left:29px solid#f4f4f4;

　　border-right:29px solid#f4f4f4;

　　}

　　心形跟星形都是比较复杂的图片，严格意义上来说，都是拼接图片，并不是一个div能够实现的图片，这里就体现了伪元素before和after的灵活性，再通过修改transform-origin属性来元素的旋转中心点。最终实现心形。

　　#heart{

　　position:relative;

　　}

　　#heart:before,#heart:after{

　　content:"";

　　width:70px;

　　height:115px;

　　position:absolute;

　　background:red;

　　left:70px;

　　top:0;

　　border-radius:50px 50px 0 0;

　　transform:rotate(-45deg);

　　transform-origin:0 1oo%;

　　}

　　#heart:after{

　　left:0;

　　transform:rotate(45deg);

　　transform-origin:1oo%1oo%;

　　}

　　无穷符号和前面制作方法类似，也是设置border属性和添加伪类元素的角度来制作的：

　　#infinity{

　　width:220px;

　　height:1oopx;

　　position:relative;

　　}

　　#infinity:before,#infinity:after{

　　content:"";

　　width:60px;

　　height:60px;

　　position:absolute;

　　top:0;

　　left:0;

　　border:20px solid#06c999;

　　-moz-border-radius:50px 50px 0;

　　border-radius:50px 50px 0 50px;

　　transform:rotate(-45deg);

　　}

　　#infinity:after{

　　left:auto;

　　right:0;

　　border-radius:50px 50px 50px 0;

　　transform:rotate(45deg);

　　}


　　消息提示框是通过先制作一个矩形，然后再其他位置利用伪类元素添加一个小三角形，做装饰，制作出来的：

　　#comment_bubble{

　　width:140px;

　　height:1oopx;

　　background:#088cb7;

　　position:relative;

　　border-radius:12px;

　　}

　　#comment_bubble:before{

　　content:"";

　　width:0;

　　height:0;

　　right:1oo%;

　　top:38px;

　　position:absolute;

　　border-top:13px solid transparent;

　　border-right:26px solid#088cb7;

　　border-bottom:13px solid transparent;

　　}


　　吃豆人看上去是一个不规则的图形，其实它的制作方法很简单，可以通过转化，先在一个圆形里面制作一个透明的三角形，就可以完成了，非常简单。

　　#pacman{

　　width:0;

　　height:0;

　　border-right:70px solid transparent;

　　border-top:70px solid#ffde00;

　　border-left:70px solid#ffde00;

　　border-bottom:70px solid#ffde00;

　　border-radius:70px;

　　}

　　CSS3为我们提供了制作各种复杂几何图形的能力，我们可以在页面中制作各种图形。

　　关注我们，收获更多品牌设计、网站开发、定制软件开发、小程序开发、SEO推广知识