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

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

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

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

难点一

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

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

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

难点二

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

如何实现

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

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

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

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

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

想写个消息框的主体

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

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

扫一扫手机访问