CSS 制作带边框背景色透明的消息框
我要评论写个消息框容易太容易了，网上一搜就一大堆教程。直接拷贝粘贴到自己项目就可以啦。大多是用::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;
}
}
总结
以上所述是小编给大家介绍的CSS 制作带边框背景色透明的消息框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了基于CSS 属性实现按钮悬停边框和背景动画集合,需要的朋友可以参考下2019-05-09
这篇文章主要介绍了css3 边框、背景、文本效果的实现代码,需要的朋友可以参考下2018-03-21- 前几天在工作的时候遇到一个问题，项目需要实现一个效果，当鼠标移入一个元素的时候，元素出现一个动态的边框，通过网上查找资料看到有人推荐可以使用Css3来实现，后来试了2016-11-08
- CSS控制背景图像平铺，从而实现区域边框阴影的效果，可贵之处是本代码不管你需要阴影的区域是多大，它都能自动适应，个人感觉还不错，具体实现如下建议收藏下哦2013-08-25
css div 边框阴影利用背景图或内外层div实现层次感觉阴影效果
在网页布局中偶尔会用到div 边框阴影做一些特殊效果本文介绍两种实现方法:一种是利用内外层的div边框来实例层次感觉的css边框阴影效果，另一种是利用了背景图片再加内外div2012-12-18css样式div或li在ie6下背景平铺及border边框断线解决技巧
css样式div或li在ie6下背景平铺或边框断线解决办法2011-09-04- 网页制作Webjx文章简介：到现在为止,只有一些已经工作的CSS3特性. 到现在为止，只有一些已经工作的特性，他们中的一些如下: 圆角 从web2.0开始，开2009-04-02
本文通过代码给大家介绍css背景和边框标签的一些知识，通过相关属性设置背景颜色，背景图像，对css背景与边框的相关知识感兴趣的朋友一起看看吧2021-05-21
最新评论