css怎么做直角三角形

一个盒子包括: margin+border+padding+content。上下左右边框交界处出呈现平滑的斜线。利用这个特点，通过设置不同的上下左右边框宽度或者颜色可以得到小三角，小梯形等。调整宽度大小可以调节三角形形状。

一般情况下, 我们设置盒子的宽高度, 及上下左右边框, 会呈现如下图（相关课程推荐：css视频教程）

#test1 {
    height:20px;
    width:20px;
    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
    border-style:solid;
    border-width:20px;
}

在上面基础上, 我们把宽高度都设为0时, 会呈现上述的边界斜线.·

这时, 其实我们已经看到有上下左右四个三角形了。如果, 我们把4种颜色, 只保留一种颜色, 余下3种颜色设置为透明(或者设置为和背景色相同的颜色), 那不就出现一个小三角了么。

.tri3 {
    width: 0; height: 0;
    border-color: transparent red; /*上下颜色 左右颜色*/
    border-width: 0 0 50px 50px;
    border-style: solid;
}
.tri4 {
    width: 0; height: 0;
    border-color: red transparent; /*上下颜色 左右颜色*/
    border-width: 0 0 50px 50px;
    border-style: solid;
}
.tri5 {
    width: 0; height: 0;
    border-color: red transparent; /*上下颜色 左右颜色*/
    border-width: 0 50px 50px 0;
    border-style: solid;
}
.tri6 {
    width: 0; height: 0;
    border-color: transparent red; /*上下颜色 左右颜色*/
    border-width: 0 50px 50px 0;
    border-style: solid;
}

<div class="tri3"></div>
<div class="tri4"></div>
<div class="tri5"></div>
<div class="tri6"></div>