制作 CSS 透明气泡框

[yanyue404]

    <button  class="bubble-tag">
        <span> 透明气泡框（带上箭头）</span>
    </button>

  .bubble-tag {
    position: relative;
    display: flex;
    justify-content: center;
    height: 40px;
    line-height: 40px;
    background: #ffffff;
    border: 1px solid #aaaaaa;
    text-align: center;
    font-size: 24px;
    color: #999;
    border-radius: 18px;
    margin: 0px auto 15px;
    padding: 0 20px;
    span {
      display: inline-block;
      height: 98%;
      background: #fff;
      z-index: 1;
    }
    // 有色的等腰三角形
    &:before {
      content: '';
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 22px 20px 22px;
      border-color: transparent transparent #ccc transparent;
      position: absolute;
      top: -18px;
      right: 50%;
      transform: translateX(50%);
    }
    // 白色的等腰三角形（比上面的稍小一点点）

    &::after {
      content: '';
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 20px 18px 20px;
      border-color: transparent transparent #ffffff transparent;
      position: absolute;
      top: -17px;
      right: 50%;
      transform: translateX(50%);
    }
  }

参考

• https://juejin.cn/post/6844904097737342983
• http://tool.uis.cc/sjmaker/