【CSS如何画简单的三角形或者梯形】

三角形

1.设置一个盒子，类名为root。将盒子的width和height设置为0px.
盒子不需要设置宽度和高度，由边框border撑起盒子大小。
2.设置边框属性为透明： border: 100px solid transparent;
3.需要哪条边的三角形，就将那条边的color设置成有颜色，如红色。

  .root{
            width: 0;
            height: 0;
            border: 100px solid transparent;
            border-bottom: 100px solid red;
            }

结果如图1-1所示：
图1-1 三角形

直角三角形

1. 如果想画一个直角三角形，那么需要哪两个方向的边，就将那两个方向border的color设置成有颜色的。

.root{
            width: 0px;
            height: 0px;
            border: 100px solid transparent;
            border-Top: 100px solid red;
            border-right: 100px solid red;   
        }

结果如图1-2所示：
图1-2 直角三角形

梯形

1.设置一个盒子，类名为root。将盒子的width和height设置为100px.(注意：数据是随便设置的，不是非要100px)
2.设置边框属性为透明： border: 100px solid transparent;
3.需要哪个方向的梯形，就将那个方向border的color设置成有颜色，如红色。

.root{
            width: 100px;
            height: 100px;
            border: 100px solid transparent;
            border-bottom: 100px solid red;
        }

结果如图1-3所示：
图1-3 梯形

直角梯形

1.先确认要画的直角梯形的下底边和斜边是哪个方向的。
2.假如，画一个下底边在bottom方向，斜边是right方向的。可以参照下方代码写：
3.主要是需要底部的大梯形，所以border-bottom 是主角，长度/颜色都需要。
斜边是配角也是需要有长度的，但是不需要有颜色，所以斜边方向的border-right 要有长度，但是不需要颜色。

 .root{
            width: 100px;
            height: 100px;
            border-bottom: 100px solid red;
            border-right: 100px solid transparent;   
        }

结果如图1-4所示：
图1-4 直角梯形