CSS 制作带边框背景色透明的消息框

然后给主体div设置下边框

哈哈 是不是解决了难题二。

最终效果

调下绝对定位的位置，调下z-index。

好了接下啦，铠甲合体！！！

详细代码

<div class="warp" >
<div class="box" >
<div class="horn" ></div>
<div class="content">低调哥挺帅</div>
</div>
</div>
.warp{
margin: auto;
width: 75%;
height: 100vh;
z-index: 1;
position: relative;
}
.box{
overflow: hidden;
.horn{
right: .75rem;
top: .18rem;
position: absolute;
transform: rotate(45deg);
width: .25rem;
height: .25rem;
border-width: 0.02rem 0rem 0rem 0.02rem;
border-style: solid;
border-color:#fff;
background: #000;
background: hsla(0, 0, 0, 0);
}
.content{
display: none;
position: relative;
margin: .3rem 0 .25rem 0;
width: auto;
float: right;
padding: .1rem .3rem;
font-size: .3rem;
color: #fff;
background: hsla(0, 0, 0, .0);
letter-spacing: .05rem;
border-bottom: .02rem solid #fff;
border-radius:.35rem;
&::after{
content:'';
position: absolute;
width: 1.305rem;
height: 103%;
top:0;
left: 0;
border-width: 0.02rem .0rem .02rem .02rem;
border-style: solid;
border-color: #fff;
border-radius: .35rem .0rem 0 .35rem;
}
&::before{
content:'';
position: absolute;
width: .71rem;
height: 103%;
top:0;
right:0;
border-width: 0.02rem .02rem .02rem .0rem;
border-style: solid;
border-color: #fff;
border-radius: 0 .35rem .35rem 0;
}
}

总结

以上所述是小编给大家介绍的CSS 制作带边框背景色透明的消息框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！