css：

 .bubble-container {
      position: relative;
      max-width: 200px; /* 氣泡框最大寬度 */
      background-color: #0077cc; /* 氣泡框背景顏色 */
      color: #fff; /* 文字顏色 */
      border-radius: 10px; /* 圓角邊框 */
      padding: 10px; /* 內(nèi)邊距 */
      margin: 10px; /* 外邊距，可根據(jù)需要調(diào)整 */
    }
右側(cè)
    .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%); /* 水平居中 */
    }
  左側(cè)
 .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>這是一個(gè)氣泡框帶有三角形。</p>
    <div class="triangle1"></div>
  </div>

效果圖：

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

注意事項(xiàng)
css有overflow: hidden 會(huì)影響氣泡的顯示