CSS画三角形/梯形

用css画三角形或者梯形等图片主要是利用css中的border属性

1. 正方形 ==>为一个div设置如下样式

   .tri {
     width: 0px;
     height: 0px;
     border-top: 100px solid aqua;
     border-right: 100px solid skyblue;
     border-bottom: 100px solid aqua;
     border-left: 100px solid skyblue;
   }
   

正方形

2. 三角形===>将其余三个边框的颜色设为transparent 即可

   
   三角形

3.改变div的宽高和border属性得到不一样的图形

    .tri {
      width: 0px;
      height: 0px;
      border-top: 0px;
      border-right: 100px solid skyblue;
      border-bottom: 100px solid aqua;
      border-left: 200px solid skyblue;
    }

变形

4.梯形

    .tri {
      width: 100px;
      height: 0px;
      border-top: 0px;
      border-right: 50px solid transparent;
      border-bottom: 200px solid aqua;
      border-left: 50px solid transparent;
    }

梯形

5.随机变形

    .tri {
      width: 100px;
      height: 100px;
      border-top: 50px solid transparent;
      border-right: 50px solid skyblue;
      border-bottom: 50px solid aqua;
      border-left: 50px solid transparent;
    }

随机形状

6.还可以用两个或者多个div拼接成更多的图形，继续发挥想象吧~