CSS实现聊天气泡效果

&nbs p; 一、效果图

京东 效果

 

模拟的效果

 

二、原理

准备一个高度和 宽 度为0的 盒子

将这个盒子设置一个边框

将边框不需要的地方用 transparent 来代替，需要显示的地方设置对应的颜色

如果需要 改变 其大小，直接设置边框的宽度 border-width

将字体 font -s ize 和行高 line-h ei ght 设置为0，以免影响显示

最后使用定位将其设置到需要的位置

三、代码

HT ML 结构

<div class="square">
    <p class="triangle"></p>
</div>

CSS样式

.square {
  pos IT ion: relative;
  width: 400px;
  height: 200px;
  background: green;
  m arg in: 150px auto;
}
.triangle {
	position: absolute;
  top: -40px;
  left: 50%;
  mar gin -left: -20px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px;
  border-color: transparent transparent  red  transparent;
  font- Size:  0;
  line-height: 0;
}

到此这篇关于CSS聊天气泡的 文章 就介绍到这了,更多相关CSS聊天气泡内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是 为你收集整理的 CSS实现聊天气泡效果 全部内容，希望文章能够帮你解决 CSS实现聊天气泡效果 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于CSS实现聊天气泡效果的详细内容...