纯CSS绘制基本图形

运用CSS3绘制基本图形的方法

HTML代码：

<div></div>

这里的div也可以写span p等元素替代

1、正方形

.area{width: 100px; height: 100px; background: red;}

长方形，则修改长宽的像素值就行了

2、圆形

.area{width: 100px; height: 100px; background: red; -moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;}

border-radius，边框圆角设为长款的一半，形成圆弧

3、椭圆形

.area{width: 200px;height: 100px