纯css制作常见的图形

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;
      }