纯CSS打造Bubble气泡提示框实现代码

可以参考以下代码实现纯CSS打造Bubble气泡提示框：

HTML部分：

<div class="bubble-container">
  <div class="bubble">
    <div class="content">
      <p>这是一个Bubble气泡提示框</p>
    </div>
    <div class="arrow"></div>
  </div>
</div>

CSS部分：

.bubble-container {
  position: relative;
  width: 200px;
  height: 100px;
  margin: 50px auto;
}

.bubble {
  position: absolute;
  width: 200px;
  height: 80px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
  padding: 10px;
}

.arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #fff transparent transparent transparent;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}

.content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 可以根据需要自定义样式 */

说明：

- 使用绝对定位实现气泡框的定位
- 气泡框使用白色背景、圆角和阴影实现
- 箭头使用三角形边框实现，同时通过绝对定位定位在气泡框底部中间
- 内容区域使用flex布局实现垂直居中对齐

注意事项：

- 可以根据需要自定义样式，如修改气泡框大小、背景颜色等
- 为了保证箭头在气泡框中间，需要将箭头左边距设置为50%，同时使用transform平移将其移动到中间位置