1、css 的 radial-gradient

<view style="padding:30px; background: #ccc;">
  <view class="navActive"></view>
</view>

.navActive{
  width: 200px;
  height: 40px;
  background-color: #fff;
  color: rgb(0,63,136);
  position: relative;
  border-top-right-radius: 20px 50%;
  border-bottom-right-radius: 20px 50%;
  box-shadow: 3px 3px 5px #ccc;
}
.navActive::before,
.navActive::after {
  content: "";
  display: block;
  height: 16px;
  width: 16px;
  position: absolute;
  background:radial-gradient(circle at 16px 16px, transparent 16px, #fff 16px);
}
.navActive::before {
  left: 0px;
  top: -16px;
  transform: rotate(-90deg);
}
.navActive::after {
  left: 0;
  bottom:-16px;
  transform: rotate(0deg);
}

这里使用了 background:radial-gradient 来控制左边的弧度， border-top-right-radius: 20px 50%; 给长方形的边指定长度区域然后设置成圆角；唯一的缺点弧度的位置无法加阴影，以及弧的弧度不太好控制；

2、canvas

无法添加阴影；

<view style="padding:30px; background: #ccc;">
  <canvas id="canvas" type="2d" style="border: 1px solid #ccc; width: 100%; height: 1000rpx;"></canvas>
</view>

Page({
  data:{},
  onLoad() {
    this.init();
  },
  init(){
    let that = this;
    //获取 canvas 节点
    wx.createSelectorQuery()
    .select("#canvas")
    .fields({
      node:true,
      size:true
    })
    .exec((res)=>{
      let canvas = res[0].node;
      let ctx = canvas.getContext("2d");
      let dpr = wx.getSystemInfoSync().pixelRatio;
      canvas.width = res[0].width * dpr;
      canvas.height = res[0].height * dpr;
      ctx.scale(dpr, dpr);

      ctx.beginPath()
      ctx.arc(270,155,25,Math.PI*0, Math.PI*2);
      ctx.fillStyle = '#fff';
      ctx.fill();
      
      ctx.beginPath()
      ctx.fillRect(70,100,30,30); //填充一个矩形
      ctx.fillRect(70,130,200,50); //填充一个矩形
      ctx.fillRect(70,180,30,30); //填充一个矩形

      ctx.beginPath()
      ctx.fillStyle = '#ccc';
      ctx.arc(100,100,30,Math.PI*0, Math.PI*2);
      ctx.arc(100,210,30,Math.PI*0, Math.PI*2);
      
      ctx.fill();//填充颜色
    })
  }
})

目前我还没有找到更好的方式能快速精准的画出这个图形，有更好方法的麻烦留下你的建议；