CSS之三角形的奥妙

参考链接： www.jianshu.com/p/9a463d50e…

1. 实现原理

<div></div>

div {
    width: 50px;
    height: 50px;
    border: 2px solid orange;
}

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

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

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

如果元素的内容尺寸设置为0会发生什么情况呢？

div {
    width: 0;
    height: 0;
    border: 40px solid;
    border-color: orange blue red green;
}

综上，我们将惊奇地发现，四边的border实际是由上下左右4个三角形“拼接”而成

2. 各种三角形的实现

2.1 等腰三角形

根据上面的结论，我们只需要把把需要显示的某个方向的border设置成指定颜色，其它方向border的颜色设置为白色或透明色即可（盒子宽度为0）：

div {
    width: 0;
    height: 0;
    /*三角形箭头冲向哪里，该方向的border-width为0,其他方向不为0*/

    border-width: 0 100px 100px 100px;
    border-style: solid;
    /* 不需要的方向的颜色为transparent*/
    border-color: transparent transparent red transparent ;
}

2.2 直角三角形

在2.1等腰三角形的基础上实现直角三角形，只需要把等腰三角形的不需要的某一方向的部分的border-width设置为0即可：

div {
    width: 0;
    height: 0;
    /*三角形箭头冲向哪里，该方向的border-width为0,其他方向不为0*/
  	/*实现直角三角形，不需要的那一部分的该方向的border-width为0*/
    border-width: 0 0 100px 100px;
    border-style: solid;
    /* 不需要的方向的颜色为transparent*/
    border-color: transparent transparent red transparent ;
}

2.3 带边框的三角形

由于不能继续通过为已有三角形设置border的方法来为其设置边框（因为三角形本身就是利用border实现的），所以只好另想办法。而能想到的一个最自然的方法就是三角形叠放，即把当前三角形叠放在更大的三角形上方，上图所示的实现方法就是把黄色三角形放在了尺寸更大的蓝色三角形上。

代码示例：

<div id="blue"><div>

 /*下面的较大的蓝色三角形*/
#blue {
    position:relative;
    width: 0;
    height: 0;
    border-width: 0 40px 40px;
    border-style: solid;
    border-color: transparent transparent blue;
}
 /*上面的较小的黄色三角形*/
#blue:after {
    content: "";
    position: absolute;
    top: 1px;
    left: -38px;
    border-width: 0 38px 38px;
    border-style: solid;
    border-color: transparent transparent yellow;
}

2.4 对比进度条

通过直角三角形，定位以及伪元素的结合可以实现类似如下类型的对比进度条效果

 *,::before,::after{
        box-sizing: border-box;
    }
    .container{
        width: 500px;
        height: 50px;
        background-color: red;
    }
    .left{
        width: calc(50% - 25px);
        height: 100%;
        background-color: yellow;
        position: relative;
    }
    /*直角三角形模拟斜线效果*/
    .left::after{
        position: absolute;
        top:0;
        content:'';
        right: -25px;
        width: 0;
        height: 0;
        /*修改对应方向的border-width大小可改变三角形的斜度*/
        border-width: 0 25px 50px 25px;
        border-style: solid;
        border-color: transparent transparent yellow transparent;
    }