css的设置border的显示问题？

Question

<div class="left"></div>

.left {
    position: absolute;
}
.left:before, .left:after {
    position: absolute;
    content: '';
    border-top: 100px transparent dotted;
    border-left: 100px transparent dotted;
    border-bottom: 100px transparent dotted;
}
.left:before{
    border-right: 100px #a00 dotted;
}
.left:after{
    left: 10px;
    border-right: 100px #fff dotted;
}

显示出来是：

这是为何呢？
若把上面代码的后两类改为：

.left:before{
    border-right: 100px #a00 solid;
}
.left:after{
    left: 10px;
    border-right: 100px #fff solid;
}

显示出来是：

为什么会这样呢？

Answer 1

其实这个跟伪元素实现三角形的类似，before先创建一个三角形

接着after也创建一个和before一样的三角形，然后left移动一定的偏移量，并设置为白色（这里我设置为蓝色比较明显）覆盖before就形成

紧接着把border-style设置为dotted
就形成您所说的效果

完全复制你的代码得到的是这样的效果：