纯CSS绘制基本图形

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

HTML代码：

<div class="area"></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