这篇文章主要介绍了css如何实现小尖角聊天对话框带尖角的说话泡泡效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
一、css 绘制实现小尖角聊天对话框,带尖角的说话泡泡,先给大家展示下效果图。
二、效果
三、代码
css;toolbar:false"><style>
#talkbubble {
width: 160px; height: 80px;
background: red;
position: relative;
border-radius: 10px;
margin-left:20px;
}
#talkbubble:before {
content: "";
position: absolute;
right: 100%;
top: 26px;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
</style>
<div id="talkbubble"></div>
补充:纯css实现气泡对话框尖角处理
先来看一下效果图:
简单粗暴上代码:
html:
<div class="dialog-box">
<span class="bot"></span>
<span class="top"></span>
</div>
less:
.dialog-box {
position: relative;
span {
width:0;
height:0;
font-size:0;
overflow:hidden;
position:absolute;
&.bot{
border-width: 15px;
border-style: solid dashed dashed;
border-color: transparent transparent #F9743A transparent;
left: 15px;
top: -29px;
}
&.top{
border-width:13px;
border-style:solid dashed dashed;
border-color:transparent transparent #fff transparent;
left:17px;
top:-25px;
}
}
}
大白话讲解:
如果你想要其他方位的尖角,就调整boder-color
的顺序(上,右,下,左)。
主要的原理大概是有两个一样形状,比例不同的小三角,一个和底色一样的实心三角bot,一个白色底的top,并且top是会盖在bot上面的,然后调整它们的大小(一般来说实心要比白色块大一点,这样才可以显示出有眼色的边边啊)。
最后想尽一切办法让它们重合(白色的top在上面,实心的bot在下面),最后通过调整绝对定位的参数(left,top)让其重合的天衣无缝。好了,大功告成啦,不知道你get到了没有?
感谢你能够认真阅读完这篇文章,希望小编分享的“css如何实现小尖角聊天对话框带尖角的说话泡泡效果”这篇文章对大家有帮助,同时也希望大家多多支持天达云,关注天达云行业资讯频道,更多相关知识等着你来学习!