css 圆角边框 加气泡实现

css：

 .bubble-container {
      position: relative;
      max-width: 200px; /* 气泡框最大宽度 */
      background-color: #0077cc; /* 气泡框背景颜色 */
      color: #fff; /* 文字颜色 */
      border-radius: 10px; /* 圆角边框 */
      padding: 10px; /* 内边距 */
      margin: 10px; /* 外边距，可根据需要调整 */
    }
右侧
    .triangle1 {
      position: absolute;
      width: 0;
      height: 0;
      border-top: 10px solid transparent; /* 左边透明 */
      border-bottom: 10px solid transparent; /* 右边透明 */
      border-left: 10px solid #0077cc; /* 底边为气泡框背景色 */
      right: -10px; /* 位于气泡框顶部 */
      top: 50%; /* 居中 */
      transform: translateY(-50%); /* 水平居中 */
    }
  左侧
 .left-triangle {
              position: absolute;
              width: 0;
              height: 0;
              border-top: 10px solid transparent; /* 左边透明 */
              border-bottom: 10px solid transparent; /* 右边透明 */
              border-right: 10px solid #ffffff; /* 底边为气泡框背景色 */
              left: -8px; /* 位于气泡框顶部 */
              top: 30%; /* 居中 */
              transform: translateY(-30%); /* 水平居中 */
            }

布局：

<!-- 气泡框 -->
  <div class="bubble-container">
    <p>这是一个气泡框带有三角形。</p>
    <div class="triangle1"></div>
  </div>

效果图：

20BBFD51-FBAC-4DE0-A708-6A8AF2B2FB39.png

注意事项
css有overflow: hidden 会影响气泡的显示