CSS3 画三角形、梯形

前言

本文固定用红色代表top，黄色代表right，绿色代表bottom，蓝色代表left。

HTML如下：

<div style="display: flex;">
  <div id="n1" style="margin-right: 50px;"></div>
  <div id="n2" style="margin-right: 50px;"></div>
  <div id="n3" style="margin-right: 50px;"></div>
  <div id="n4" style="margin-right: 50px;"></div>
</div>

三角形

1、大三角形。用border来画三角形。

.child{
    width: 0px;
    height: 0px;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 100px solid transparent;
}

 

 改一下颜色：

.child{
    width: 0px;
    height: 0px;
    border-top: 100px solid red;
    border-right: 100px solid yellow;
    border-bottom: 100px solid green;
    border-left: 100px solid transparent;
}

大三角形总结： 盒子宽高均为零，三面边框皆透明。

2、小三角形。

#n1{
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-left: 100px solid transparent;
}
#n2{
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
}
#n3{
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-bottom: 100px solid green;
}
#n4{
  width: 0;
  height: 0;
  border-right: 100px solid transparent;
  border-bottom: 100px solid green;
}

小三角形总结，设置相邻两边框，一个有颜色，一个透明。如果把透明的那个边改成有颜色，则是一个矩形，以对角线分割颜色。

 梯形

#n1{
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid yellow;
  border-bottom: 100px solid transparent;
}
#n2{
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-left: 100px solid blue;
  border-bottom: 100px solid transparent;
}
#n3{
  width: 0;
  height: 0;
  border-top: 100px solid transparent;
  border-right: 100px solid yellow;
  border-bottom: 100px solid green;
}
#n4{
  width: 0;
  height: 0;
  border-top: 100px solid transparent;
  border-left: 100px solid blue;
  border-bottom: 100px solid green;
}

 梯形总结：至少要设置三个边框，哪边是斜边，哪边就透明。