边框上的突出小箭头

最新推荐文章于 2022-04-26 18:24:02 发布

终是后来居上

最新推荐文章于 2022-04-26 18:24:02 发布

阅读量533

点赞数

文章标签：边框上的突出小箭头

本文链接：https://blog.csdn.net/weixin_43953710/article/details/87617095

版权

我的bug路专栏收录该内容

87 篇文章 2 订阅

订阅专栏

在这里插入图片描述

.tcnr{
width: 15.3rem;
height: 5.325rem;
background: rgba(245,247,254,1);
border: 0.05rem solid rgba(161,187,250,1);

            position: relative;
            
            
        }

突出小箭头里的颜色

.tcnr:before{
box-sizing: content-box;
width: 0rem;
height: 0rem;
position: absolute;
top: -0.4rem;;
left:1.825rem;
padding:0;
border-bottom:0.2rem solid #F5F7FE;
border-top:0.2rem solid transparent;
border-left:0.2rem solid transparent;
border-right:0.2rem solid transparent;
display: block;
content:’’;
z-index: 12;
}

突出小箭头

        .tcnr:after{
            box-sizing: content-box;
            width: 0rem;
            height: 0rem;
            position: absolute;
            top: -0.45rem;;
            left:1.8rem;
            padding:0;
            border-bottom:0.225rem solid #A1BBFA;
            border-top:0.225rem solid transparent;
            border-left:0.225rem solid transparent;
            border-right:0.225rem solid transparent;
            display: block;
            content:'';
            z-index:10
        }