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