CSS实现聊天气泡效果
(编辑：jimmy 日期: 2025/1/12 浏览：2)
一、效果图
京东效果
模拟的效果
二、原理
准备一个高度和宽度为0的盒子
将这个盒子设置一个边框
将边框不需要的地方用 transparent 来代替，需要显示的地方设置对应的颜色
如果需要改变其大小，直接设置边框的宽度 border-width
将字体 font-size 和行高 line-height 设置为0，以免影响显示
最后使用定位将其设置到需要的位置
三、代码
HTML结构
<div class="square">
<p class="triangle"></p>
</div>
CSS样式
.square {
position: relative;
width: 400px;
height: 200px;
background: green;
margin: 150px auto;
}
.triangle {
position: absolute;
top: -40px;
left: 50%;
margin-left: -20px;
width: 0;
height: 0;
border-style: solid;
border-width: 20px;
border-color: transparent transparent red transparent;
font-size: 0;
line-height: 0;
}