详解使用CSS3绘制矩形、圆角矩形、圆形、椭圆形、三角形、弧

1.矩形
绘制矩形应该是最简单的了,直接设置div的宽和高,填充颜色,效果就出来了。

2.圆角矩形
绘制圆角矩形也很简单,在1的基础上,在使用css3的border-radius,即可。

3.圆
根据圆的特性,在2的基础上,设置div的宽和高一直,为正方形,然后设置border-radius为50%即可。

4.椭圆
椭圆也很简单了,只需要在3的基础上,让div的宽和高不一致即可。为了更好看,建议宽设置为高的1.5倍。

5.三角形
三角形相对其他来说,就有点难了。这里我们要用到border-style属性在配合分别设置四个边的border的宽度来实现。最终效果见下面的代码。

6.弧
本质上是利用圆角来实现,现在需要把矩形的左上角的圆角绘制成弧形,那么把右边和底边border的宽度设成0px,让他们不可见,设置左上角圆角的半径,让其变大,看得明显些,其余的圆角半径全都设成0px,这样一个弧形就完成了。

7.平行四边形

平行四边形是在矩形的基础上运用了一个CSS3的transform属性。使用了变形效果。

8.六角星
六角星是使用了一个“:after”制作了另一个反方向的三角形,在定位层叠到一起,从而形成六角星,说白一点就是两个三角拼在一起变成了六角星。

9.五角星
五角星主要也是使用了CSS3的transform属性,并配合“:after”来使用。

10.心形、阴阳图、Point Burst、仿微信消息框、Pac-Man等就不一一举例了,大家直接看代码。

DEMO地址:http://codepen.io/jonechen/pen/mPgYYQ

转载于:https://www.cnblogs.com/jone-chen/p/5497274.html

你可能感兴趣的:(详解使用CSS3绘制矩形、圆角矩形、圆形、椭圆形、三角形、弧)