css聊天气派,css如何实现小尖角聊天对话框带尖角的说话泡泡效果

css如何实现小尖角聊天对话框带尖角的说话泡泡效果

发布时间：2021-03-20 09:44:20

来源：亿速云

阅读：58

作者：小新

这篇文章主要介绍了css如何实现小尖角聊天对话框带尖角的说话泡泡效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

一、css 绘制实现小尖角聊天对话框，带尖角的说话泡泡，先给大家展示下效果图。

二、效果

三、代码css;toolbar:false">

#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;

}

补充：纯css实现气泡对话框尖角处理

先来看一下效果图：

简单粗暴上代码：

html：

.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如何实现小尖角聊天对话框带尖角的说话泡泡效果”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!