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

小诸哥 2022-06-23 21:58:52 0

写个消息框容易太容易了，网上一搜就一大堆教程。直接拷贝粘贴到自己项目就可以啦。大多是用::after或者::before实现三角形，绝对定位移动到边上成为消息框的角角。

但是如果要我们实现背景色是透明的消息框，如下：

似乎常用的消息框写法这种操作是实现不了的。

难点一

用常用的方式实现的消息框，想要改成透明背景，似乎不太可能。

因为如果消息框有边框的话，消息框的角通常是用::after 与 ::before 做成三角形，然后一大点的三角形与小一点的三角形重叠而成，如果我们想要把消息框的角变成透明的，总会透到后面作为是模拟边框的三角形的颜色。

(如上图我把作为背景三角形设置了 opacity: .5 透的是作为边框的颜色，两个颜色混合在了一起)

难点二

还有一个问题就是消息框的角透明会透到消息框的边框线。

如何实现

好了，接下来说说我是如何实现的。

消息框的角还有另一种实现方法就是就是写个小正方形旋转45度。

然后给正方形上边和右边边框

然后再给个透明背景色 background: hsla(0, 0, 0, 0);

好了一个可以透明到背景的角实现了我们再来解决难题二。

想写个消息框的主体

好，然后用主体div的::after 和 ::before 实现左边和右边的边框，中间隔开要放三角形的位置

然后给主体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;
         }
     }