css3伪after应用三角箭头的原理及效果

实现原理：三边设置边框。无需设置箭头方向的边界。箭头两侧的边框颜色是透明的，相反的一侧是主边框颜色。 （较大）/主体背景颜色（较小），因为我们想要一个带有边框颜色的三角形箭头，第一个箭头（较大）被第二个箭头（较小）正确覆盖后剩下的没有覆盖的底部是框架。合成三角形箭头，其颜色为较大三角形箭头的颜色，可以调整。小三角形箭头的颜色应设置为主颜色。进行负位置偏移时，必须遮盖主体框架，以便与主体合并

<div class='container'>
    <img alt='' src='http://placehold.it/400x200'>
    <div class='arrow-left'></div>
</div>
<div class='container new'>
    <div class='arrow-right'></div>
    <img alt='' src='http://placehold.it/400x200'>
</div>
复制代码

.arrow-left:before {
    z-index: 9999;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid #E9E9E9;
    position: absolute;
    left: -20px;
    top: 80px;
}

复制代码

效果：

作者：codecao