border做箭头的例子

<style>
    .test{
        margin:0 auto;
        width:100px;
        height:100px;
        background:lightskyblue;
        position:relative;
    }
    .arrow{
        position:absolute;
        bottom:0px;
        top:0;
        left:-140px;
        right:0;
        margin:auto;
        width:0;
        height:0;
        border-right:10px solid black;
        border-left:10px solid transparent;
        border-top:10px solid transparent;
        border-bottom:10px solid transparent;
    }
</style>

<div class="test">
    <div class="arrow"></div>
</div>

最终效果：

转载于:https://www.cnblogs.com/dittoliu/p/6265472.html