超简单实现平滑尖尖气泡框

实现一个三角形的尖尖的气泡框，相信很多人都会，但是想要实现一个平滑的尖尖就没那么容易。接下来让我带你实现，最终效果如下图

平滑尖尖实现

最开始感觉用css实现会比较麻烦，于是决定用svg来实现这个尖尖，现在对这个尖尖进行剖析，把他分成三段弧来实现。如下图

<svg width="17" height="10" class="ss">
  <path
    fill="white" 
    d="
      M 0 10 
      A 10,10,0,0,0,8 7 
      A 3,3,0,0,1,9 7
      A 10 10,0,0,0,17 10
    "
    stroke="#ffe3c9"
  />
</svg>

d属性的三个A就是三段弧的路径

总体代码

尖尖实现了，圆角框就轻轻松松啦，直接将尖尖定位到框框的顶部即可,具体代码如下

<style>
  .box{
    position: relative;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    background: #FFF;
    border: 1px solid #FFE3C9;
    border-radius: 20px;
    font-size: 12px;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .cusp{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -10px;
  }
</style>

<div class="box">
  <svg width="17" height="10" class="cusp">
    <path
      fill="white" 
      d="
        M 0 10 
        A 10,10,0,0,0,8 7 
        A 3,3,0,0,1,9 7
        A 10 10,0,0,0,17 10
      "
      stroke="#ffe3c9"
    />
  </svg>
  <span>气泡框</span>
</div>

最终效果如下