关于box-sizing: border-box;

大致理解是你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的width设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减 去(border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。
注： border-box 不包含 margin。

设置width:100px和height:100px

这样的话 我们可以把border设置 border: 50px solid transparent;

在全局的border上把transparent设置上

代码如下

     .box {
         box-sizing: border-box;
         width: 100px;
         height: 100px;
         border: 50px solid  transparent;
         border-color: #9fb083 #D74B4B #DCDDD8 #475F77;
     }

得到如下

通过调试我们可以看到content已经为0

最后我们需要什么方向的三角形就可以设置

例如

    .box {
        box-sizing: border-box;
        width: 100px;
        height: 100px;
        border: 50px solid  transparent;
        /* border-color: #9fb083 #D74B4B #DCDDD8 #475F77; */
        border-top-color: #475F77;
    }

得到如下图形

最后注意width和height 还是占有100px的位置，只是变成透明了。