利用CSS盒模型中的border（边框）实现三角形

利用CSS盒模型中的border（边框）实现三角形

<div></div>
    div{
            margin: 0 auto;
            width: 200px;
            height: 200px;
            border: 2px solid orange;
        }

这是我们平常使用border最普遍的情况——往往只给border一个较小的宽度（通常为1-2px）；然而这样的日常用法就会容易让大家对border的形成方式产生误解，即认为元素的border是由四个矩形边框拼接而成。

然而事实并不是这样。实际上，元素的border是由三角形组合而成，为了说明这个问题，我们可以增大border的宽度，并为各border边设置不同的颜色：

<div></div>   
div {
        width: 50px;
        height: 50px;
        border: 40px solid;
        border-color: orange blue red green;
         }

把元素的内容尺寸设置为0,就会出现三角形的填充

div {
    width: 0;
    hei