边框上的突出小箭头

边框上的突出小箭头_第1张图片


.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

            }

你可能感兴趣的:(边框上的突出小箭头)