最近在研究css3，拜读了《css揭秘》，收益匪浅，对css有了更深刻的认识，css并没有想像的那么简单，很多效果现在都可以用css实现，就拿图形的形状来说吧，下面我将总结一下学习到的知识。css3形状主要包括：椭圆，平行四边形，菱形，切角效果，饼图等等。
每一天都在进步。

椭圆

  • border-radius
    语法： border-radius:1-4 length|% / 1-4 length|%;
    它是的简写形式如：border-radius：50%；但它实际上是：
    如： border-radius:10px 20px 30px 40px / 40px 30px 20px 10px
    斜杠/左边是四个圆角的水平半径，右边是四个圆角的垂直半径；但是通常我们很少写右边的参数，那就是默认右边等于左边的值
    border-top-left-radius
    border-top-right-radius
    border-bottom-right-radius
    border-bottom-left-radius
    左上角开始，顺时针，空格分隔各个值
    bordr-raidus
    绿色指的是水平半径，紫色指的是垂直半径。
    示例：http://codepen.io/cherishing/pen/NbNmYr
    椭圆：
    bordr-raidus
    如上图，通过“/”单独指定水平半径和垂直半径
    自适应椭圆：
    border-radius:50% <=> border-radius:50% / 50%;
    示例：http://codepen.io/cherishing/pen/dOMJyj

1) 半椭圆的绘制
bordr-raidus
css-code如：
.circle{
width:300px;
height:200px;
margin:10px auto;
background:#f00;
border-radius:50% /100% 100% 0 0;
}
上图的半椭圆是沿x轴劈开的，它的左右水平半径各占容器宽度的一般，所以水平半径为50%；而垂直半径只有左上角，右上角有，且垂直半径占据了容器的整个高度，所以垂直半径为100% 100% 0 0，结合起来就是上面css-code中的。
可能很多人和我第一次写的一样，错误的写法如：border-radius:50% 50% 0 0;
以为这样就可以生成半椭圆，但实际上这样是没有正确理解水平半径和垂直半径以及容器宽高的关系。
百分比是按容器宽高来给定的，一半就是50%，撑开了整个容器的高度就是100%。

2) 四分之一椭圆
示例：http://codepen.io/cherishing/pen/pNypEN

圆

bordr-raidus 宽高相等显示圆；

指定任何大于100px的半径，仍然可以得到一个圆形。
原因：
当任意两个相邻圆角的半径之和超越border box的尺寸时，用户代理必须按比例减小各个边框半径所使用的值，直到它们不会相互重叠。
—–css背景与边框
示例：http://codepen.io/cherishing/pen/aBNVeV

平行四边形

1、利用transform:skew()
Skew()变换坐标系：y轴顺时针为正，x轴逆时针为正（注：它的y轴正方向是水平向右，x轴正方向是水平向下）
示例：http://codepen.io/cherishing/pen/XNdVaZ

Bug:

该属性会造成里面的文字也跟着变形，有什么办法只让容器变形，内容不 变形吗？？？？

1）对里面的内容再一次应用反向的shew()变形；从而抵消容器的变形效果
对内容添加一个div
示例：http://codepen.io/cherishing/pen/ENKooR

2、利用伪元素
方法：利用伪元素及定位属性，产生一个方块，然后对伪元素设置样式，并将其放置在宿主元素下层。
示例：http://codepen.io/cherishing/pen/QGNaBp

菱形

利用transform:rotate(angle);
angle为正数,表示顺时针旋转；
angle为负数,表示逆时针旋转;
菱形
示例：http://codepen.io/cherishing/pen/bBpPBm

  • 菱形图片
    1）利用前面的平行四边形相似的处理方法，img外面套一个div，对容器旋转45度角；图片-45度角
    正常：菱形
    但是有个hack，处理非正方形图片就会原型毕露。如下图：
    菱形
    2）clip-path剪裁路径（实验技术）
    实验属性；没有被主流浏览器支持（包括ie和火狐）；但在webkit浏览器中，它可以使用。
    在现代浏览器中需要使用 -webkit- 前缀
    -webkit-clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    示例：http://codepen.io/cherishing/pen/MbyLgV

切角效果

1、linear-gradient(angle, color….color)
第一个参数指明渐变方向，
0deg表示从下往上，90deg表示渐变从左往右，180deg表示渐变从上往下，270deg表示渐变从右往左，顺时针 ；或者用to+关键字表示；to top等于0deg;
如：div { background: linear-gradient(10deg, red, blue) }
菱形
渐变本本质上就是background-image,所以我们可以像对待background-image一样使用background-size调整大小;
示例：http://codepen.io/cherishing/pen/zoqXqE
2、切角效果
一个角：
示例：http://codepen.io/cherishing/pen/gLrzEP

两个角、四个角：
示例：http://codepen.io/cherishing/pen/WowJBj

或者用clip-path:polygon()

饼图

1、基于transform的解决方法：
1）画一个左右两部分颜色不同的圆
2）把左（右）部分用伪元素遮盖住
3）通过旋转伪元素实现
区分小于50%和大于50%；
下面示例只实现的小于50%：
示例：http://codepen.io/cherishing/pen/yVJKzd

大于50%的处理方法:固定50%部分的颜色，通过旋转露出剩余的部分，所以给的角度只能在0~.5trun。