div+CSS制作类似微信对话气泡效果的实例总结

2020-05-07 06:37:04易采站长站整理

                <div class="lim_bubble lim_shadow"><p class="lim_dot">您好,请问有什么可以帮到您?</p></div>  
                <div class="lim_tale"><div class="radiusborder"></div></div>  
            </div>  

1.先画一个小矩形。

CSS Code复制内容到剪贴板

.lim_operator .lim_tale {   
    left: -1px;   
    background-color: #c8f064;   
    border-color: #a5d01b;   
    margin-left: 70px;   
}   
.lim_tale {   
    position: absolute;   
    width: 12px;   
    height: 8px;   
    overflow: hidden !important;   
    top: 10px;   
    z-index: 2;   
    border-top-style: solid;   
    border-top-width: 1px;   
}  

201641111707634.png (349×82)

2.画出斜线。

css里面是没有斜线的,这里是用了一个园的弧形拼出来的。在一个大圆上,截取一段弧,就是一条斜线了。

CSS Code复制内容到剪贴板

.lim_operator .radiusborder {   
    position: absolute;   
    background-color: #EFF0F2;   
    top: -29px;   
    left: -94px;   
    height: 160px;   
    width: 160px;   
    border-top-style: solid;   
    border-top-width: 1px;   
    border-right-style: solid;   
    border-right-width: 1px;   
    border-top-rightright-radius: 154px;   
    border-color: #a5d01b;   
}  

四、叠加式:

原理就是相当于用before先画出一个有色背景,再用after画出一个白色背景,然后叠加错开顶部1-2px,这样就出现了一个有边框有背景的三角形。web 微信就是这种做法