先上代码：
div.bubble{ ?position: absolute; ?margin: 0; ?padding: 0; ?color: #86181d; ?background-color: #ffdce0; ?border-color: #cea0a5; ?display:block; ?border:1px solid; ?border-radius: 4px; ?padding: 2px;}div.bubble::before{ ?content: ‘ ‘; ?display: block; ?border-right:7px solid #ffdce0; ?border-left:7px solid ?transparent; ?border-top:7px solid ?transparent; ?border-bottom: 7px solid transparent; ?width: 0px; ?height: 0px; ?position: absolute; ?top:4px; ?left:-14px; ?z-index: 3;}div.bubble::after{ ?content: ‘ ‘; ?display: block; ?border-right:8px solid #86181d; ?border-left:8px solid ?transparent; ?border-top:8px solid ?transparent; ?border-bottom: 8px solid transparent; ?width: 0px; ?height: 0px; ?position: absolute; ?top:3px; ?left:-16.5px; ?z-index: 2;}效果图：
主要运用的是1.border 组成的直角三角形。2，before 和 after 伪元素 。3，z-index属性
1. 将元素的长宽设置为0，并且将border的3条边设置为透明的，就会出现border颜色的直角三角形；
2. 利用伪元素after和before，可以不用另外创建子元素，这可以避免不必要的dom复杂性
3. 用两个border设置的三角形，一大一小，可以模拟边框的效果
纯css实现气泡效果
原文地址：https://www.cnblogs.com/incredible-x/p/9807212.html