CSS 制做带边框情况色全透明的信息框

2021-01-20 18:14 jianzhan

写个信息框非常容易太非常容易了,在网上1搜就1大堆实例教程。立即复制粘贴到自身新项目便可以啦。大多数是用::after或::before完成3角形,肯定精准定位挪动到旁边变成信息框的角角。

可是假如要大家完成情况色是全透明的信息框,以下:

好像常见的信息框写法这类实际操作是完成不上的。

难点1

用常见的方法完成的信息框,要想改为全透明情况,好像不太将会。

由于假如信息框有边框的话,信息框的角一般是用::after 与 ::before 做成3角形,随后1大点的3角形与小1点的3角形重合而成,假如大家要想把信息框的角变为全透明的,总会透到后边做为是仿真模拟边框的3角形的色调。

(如上图我把做为情况3角形设定了 opacity: .5 透的是做为边框的色调,两个色调混和在了1起)

难点2

也有1个难题便是信息框的角全透明会透到信息框的边框线。

怎样完成

好了,接下来讲说我是怎样完成的。

信息框的角也有另外一种完成方式便是便是写个小正方形转动45度。

随后给正方形上边和右侧边框

随后再给个全透明情况色 background: hsla(0, 0, 0, 0);

好了1个能够全透明到情况的角完成了大家再来处理困难2。

想写个信息框的行为主体

好,随后用行为主体div的::after 和 ::before 完成左侧和右侧的边框,正中间分隔要放3角形的部位

随后给行为主体div设定下边框

哈哈 是否处理了困难2。

最后实际效果

调下肯定精准定位的部位,调下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 制做带边框情况色全透明的信息框,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!