1.正方形

 <div class="square"></div>

.square {width: 100px;height: 100px;background-color: #ffff00;}

效果：

2.长方形

<div class="rectangle"></div>

 .rectangle{width: 200px;height: 100px;background-color: #ff0000;}

3.菱形

<div class="rhombus"></div>

 .rhombus{width: 100px;height: 100px;transform: rotate(45deg);background-color: #ffff00;}

4.三角形

<div class="triang"></div>

  .triang{width: 0px;height: 0px;border: 40px solid transparent;border-bottom: 40px solid #ff0000;}

 

5.梯形 

<div class="trapezoid"></div>

 .trapezoid {width: 100px;height: 0px;border: 40px solid transparent;border-bottom: 40px solid #ff0000;}