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就形成您所说的效果完全复制你的代码得到的是这样的效果：