纯css制作常见的图形

1.正方形

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

效果：

2.长方形

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

3.菱形

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

4.三角形

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

 

5.梯形 

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