实现弧形切角两种方式

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.lineWidth = 3;
      ctx.strokeStyle = "#fff";
      ctx.beginPath();
      ctx.moveTo(45, 105);
      ctx.quadraticCurveTo(45, 130, 70, 130);
      ctx.lineTo(270,130);
      ctx.bezierCurveTo(270, 130, 295, 155, 270, 180);
      ctx.lineTo(70,180);
      ctx.quadraticCurveTo(45,180, 45, 210);
      ctx.lineTo(45,110)
      ctx.fillStyle = "#fff"
      ctx.shadowBlur = 20;
      ctx.shadowColor="red";//阴影颜色；
      ctx.fill();//填充颜色
    })
  }
})

主要是使用 贝塞尔曲线（quadraticCurveTo、bezierCurveTo） 来画出弧形，然后填充颜色就可以了；

3、贝塞尔曲线生成工具

ctx.quadraticCurveTo(控制点坐标，结束点坐标)
ctx.bezierCurveTo(第一个控制点坐标，第二个控制点坐标，结束点坐标)

开始点坐标一般会以上一个结束点作为开始点，如果没有可以使用 moveTo 来指定一个开始点；

二次贝塞尔曲线生成工具：http://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html

三次贝塞尔曲线生成工具：http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html