js 气泡框小尖角

如果你想为气泡框添加一个小尖角，可以通过 CSS 中的伪元素 `::before` 或 `::after` 来实现。以下是一个示例代码：

<div class="bubble">
  <p>这是一个气泡框，带有小尖角。</p>
</div>

.bubble {
  position: relative;
  background-color: #f1f1f1;
  border-radius: 5px;
  padding: 10px;
  margin: 20px;
}

.bubble::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border: 10px solid transparent;
  border-top-color: #f1f1f1;
  transform: translateX(-50%);
}

在上面的代码中，我们为 `.bubble` 元素设置了 `position: relative;`，然后使用 `::before` 伪元素为其添加了一个小尖角。`::before` 伪元素的 `content` 属性设置为空字符串，使其成为一个空元素。然后，我们将其定位到 `.bubble` 元素的底部中心，使用 `border` 属性为其设置一个三角形的形状，并使用 `border-top-color` 属性为其设置和 `.bubble` 元素相同的背景颜色。最后，使用 `transform` 属性将其水平居中对齐。