CSS3实现各种图形的示例代码
这篇文章跟大家分享了利用CSS3实现各种的图形，例如自适应的椭圆、运动的椭圆、半椭圆、平行四边形以及切角矩形等等，想学习更多的图形实现方法，那么下面来一起看看这篇文章吧。
1、自适应的椭圆
复制代码
代码如下: 鼠标划上来看看
运动的椭圆
2、半椭圆
复制代码
代码如下:本来一个div就可以，不过我用了两个四十五度的，自己玩。
半椭圆
3、平行四边形
复制代码
代码如下:首先
平行四边形
4、平行四边形
复制代码
代码如下:
平行四边形
5、切角矩形
复制代码
代码如下:
切角矩形
6、凹角矩形
复制代码
代码如下:
凹角矩形
7、切角矩形(SVG)
复制代码
代码如下:
切角矩形
8、梯形
复制代码
代码如下:
梯形
9、梯形
复制代码
代码如下:
梯形
10、梯形
复制代码
代码如下:
梯形
11、div饼图
复制代码
代码如下:
饼图
12、饼图
复制代码
代码如下:
饼图
13、js绘制饼图
复制代码
代码如下:20%
60%
js绘制饼图
备注：这里的大多数例子，都是从LEA VEROU的《css揭秘》这本书上借鉴来的，感兴趣的童鞋不如去买这本书，简直是CSS神书，就和Js的蝴蝶一样，前端必备。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者使用Css3能有所帮助，如果有疑问大家可以留言交流。
标签：