css边框带箭头，方便修改上下左右。

发布于：2022-05-06 00:01:35  栏目：技术文档

原理是利用::before的内容去定位遮挡::after的内容，不能全部遮挡完，预留和边框一样大的PX.

下面可以修改注释的‘控制位置PX’来定位上下左右，实现上下左右箭头。

<style>
    .con {
        background: white;
        border: 1px solid #D9E0E6;
        padding: 20px;
        position: relative;
        border-radius: 3px;
        width: 400px;
    }
    .con::after {
        display: block;
        content: "◆";
        position: absolute;
        font-size: 26px;
        left: 105px;/*控制实心箭头处左边位置*/
        bottom: 24px;/*控制实心箭头处底边位置*/
        color: white;
    }
    /*注意：此处::before的content要比::after的bottom高1px，就形成了箭头视觉效果了*/
    .con::before {
        display: block;
        content: "◆";
        position: absolute;
        font-size: 26px;
        left: 105px;/*控制空心箭头处左边位置*/
        bottom: 25px;/*控制空心箭头处底边位置*/
        color: #D9E0E6;
    }
</style>
<div class="con"></div>

相关推荐