纯css实现箭头

纯css实现箭头

发布时间：2018-04-10 15:11:21

原理：通过伪元素绘制出的两个三角形，一个与背景色相同覆盖部分红色箭头，形成三角线

span.arrow-down {
    position: relative;
}

span.arrow-down:after,
span.arrow-down:before {
    border: 8px solid transparent;
    border-top: 10px solid #3c8dbc;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: -20px;
    content: ' '
}

span.arrow-down:before {
    border-top-color: #E4E4E4;
}