用css实现框内实线

只给一个div标签，用css实现下图所示的框内实线，

框内实线

我使用的方法是"伪元素+三角形"，具体原理：在实线框内包含一个小一号的、带颜色的三角形，再在实三角形里包含一个更小一号的、白色的三角形，层层覆盖。

代码如下：

div {
    box-sizing: border-box; /*box大小 = content + padding + border*/
    position: relative;
    left: 100px;
    top: 100px;
    height: 100px;
    width: 100px;
    border: 1px solid black;
}
div::before {
    content: "";
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 0px;
    height: 0px;
    border-top: 49px solid transparent;/*边框长度 = 2倍border*/
    border-right: 49px solid transparent;
    border-bottom: 49px solid red;
    border-left: 49px solid red;
}
div::after {
    content: "";
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 0px;
    height: 0px;
    border-top: 48px solid transparent;
    border-right: 48px solid transparent;
    border-bottom: 48px solid white;
    border-left: 48px solid white;
}