CSS绘制三角形

发现了一个特别有意思的技巧，利用CSS中border属性，可以绘制相应的图形，今天先介绍一下三角形。

.trangle1{
    width: 0px;
    height: 0px;
    border-top: 100px solid red;
    border-bottom: 100px solid transparent;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
 }
 <div class="trangle1"></div>

效果如下：

原型是这样的：

.trangle{

width: 100px;

height: 100px;

border-top: 100px solid red;

border-bottom: 100px solid black;

border-left: 100px solid yellow;

border-right: 100px solid blue;

}

收缩一下高度：

.trangle{

width: 100px;

height: 0px;

border-top: 100px solid red;

border-bottom: 100px solid black;

border-left: 100px solid yellow;

border-right: 100px solid blue;

}

发现上下两部分已经接触到了，在收缩一下宽度：

.trangle{

width: 0px;

height: 0px;

border-top: 100px solid red;

border-bottom: 100px solid black;

border-left: 100px solid yellow;

border-right: 100px solid blue;

}

神奇的事情发生了，左右两部分也接触到了，而且四部分均已接触到，那么通过隐藏其他三个部分，就可以得到相应指向的等腰三角形了；正如最开始的三角形，尝试一下其他指向的三角形：

顶点朝上：

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

顶点朝右：

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

顶点朝右：

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

通过隐藏其余两个，也可以实现直角三角形的绘制，例如：

.trangle5{

width: 0px;

height: 0px;

border-top: 100px solid red;

border-bottom: 100px solid transparent;

border-left: 100px solid transparent;

border-right: 100px solid red;

}