CSS3画各种常见的图形

利用CSS3我们画各种常见的图形，有时候能够省去我们切图的麻烦。
下面就是我根据穆乙 的思路自己测试的画图的CSS方法，测试环境是chrome浏览器，请在支持CSS3的浏览器中测试。

一、正，长方形

这种比较容易，设置width height background-color就能实现，其实还有个“歪门邪道”，那就是通过边框实现，如果我们只设置一边的边框就会发现显示的为矩形，如下

width: 100px;
border-top: 50px solid #096;

二、梯形，平行四边形

我们在设计首页的导航栏的时候，可以适当的使用平行四边形，这样能够带来不一样的用户体验
实现的原理也比较简单，就是将矩形设置CSS3的属性skew()即可

width: 200px;
height: 100px;
transform: skew(-20deg);
-webkit-transform: skew(-20deg);
-moz-transform:skew(-20deg);
-o-transform:skew(-20deg);
background-color: #096;

梯形的原理则是不设置高度，只设置宽度，两边的颜色为透明

width: 100px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #096;

三、三角形

首先我们看下我们实现的原理图
当内容的width和height都为0时，这时候我们在设置边框就会产生下面显示效果

width: 0;
height: 0;
border: 50px solid transparent;
border-color: #c96 #cc6 #699 #960;

当我们只让其中的三个颜色设置为transparent就形成了三角形
当我们把中心点想办法移到最上边时也形成了三角形，

当我们把中心点移到左上角时形成直角三角形

四、圆

圆的实现也比较直观
1. 设置宽高背景色，然后设置border-radius即可
2. 我们也可以设置宽高为0，然后设置一定宽度的border，最后设置border-radius

半圆则可以，设置宽高后设置左右角的半径
使用border-radius：左上角 右上角 右下角 左下角

1/4圆

鹰嘴图形 我们可以和提示框组合在一起

width:50px;
height: 50px;
border-right: 22px solid #096;
border-bottom-right-radius: 50px; 

当减小border的宽度时就会产生这样的图形，改变border的方向和角度的方向就能改变图标指示的方向
椭圆
border-radius:100px/50px;属性是可以设置两个值的，分别是x的半径和y的半径

五、通过before和after的结合画爱心