0
<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;
}

显示出来是:
图片描述

为什么会这样呢?

2019-05-18 提问
1 个回答
1

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

clipboard.png

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

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

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

clipboard.png

撰写答案

推广链接