css 实现小尖角聊天对话框带尖角的说话泡泡效果
发布时间：2020-04-10 15:57:15 作者：佚名 
我要评论
我要评论这篇文章主要介绍了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 实现小尖角聊天对话框带尖角的说话泡泡效果的文章就介绍到这了,更多相关css 尖角聊天对话框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
这是一个对话框插件，它主要用来卸载软件时的提示，特点在于，当用户选择保留和卸载后，对话框中间的表情会根据用户选择发生动态变化，非常可爱。需要的朋友前来下载2019-07-29
对话框小尾巴，估计大家在实际开发中应该经常遇到过，省事点的就是叫设计小姐姐给切个带小尾巴的背景图，那不省事的呢？这篇文章主要介绍了CSS对话框小尾巴,需要的朋友可以2019-05-16
这篇文章主要介绍了纯CSS实现气泡对话框尖角处理的实现代码，非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-06-26- 泡沫对话框是一种比较流行的趋势因为它改变了传统，通常情况下都是使用html和javascript或者是图片来实现，接下来为大家介绍下使用css3配合html来实现一些简单的泡沫对话框2013-03-21
- 利用CSS的border属性可以生成一些图形，例如三角或是圆角。纯粹的CSS2的内容，没有兼容性的问题，我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS2010-12-27
最新评论