css实现气泡的小尖角效果

要实现气泡的小尖角效果，可以使用CSS的伪元素和边框技巧来实现。以下是实现的具体步骤：

要实现气泡的小尖角效果，可以使用CSS的伪元素和边框技巧来实现。以下是实现的具体步骤：

1. 给气泡外层容器设置相对定位和宽高

.bubble {
  position: relative;
  width: 200px;
  height: 100px;
}

2. 给气泡容器添加空白内容并设置绝对定位和边框

.bubble:after {
  content: "";
  position: absolute;
  bottom: -20px; /* 箭头的位置 */
  left: 50%; /* 箭头的位置 */
  margin-left: -10px; /* 箭头的宽度 */
  border: 10px solid transparent; /* 边框 */
  border-top-color: #fff; /* 上边框的颜色 */
}

这里通过给气泡容器的after伪元素添加边框，并使用transparent属性使得除了上边框外，其他边框都不显示出来。

3. 旋转伪元素实现箭头

.bubble:after {
  transform: rotate(45deg);
}

旋转45度的角度，就可以得到一个等边钝角三角形，再通过边框设置上边框的颜色，就可以得到一个小箭头了。

示例1：黑色气泡

<div class="bubble">
  <p>这是一段气泡内容</p>
</div>

.bubble {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #000;
  color: #fff;
}

.bubble:after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top-color: #000;
  transform: rotate(45deg);
}

示例2：粉色气泡

<div class="bubble pink">
  <p>这是一段气泡内容</p>
</div>

.bubble {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #fff;
  color: #000;
  border: 1px solid #ccc;
}

.bubble.pink {
  background-color: #fffdde;
  color: #ff007f;
  border-color: #ff007f;
}

.bubble:after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top-color: #fff;
  transform: rotate(45deg);
}

以上就是实现气泡小尖角效果的完整攻略和两个示例。