实现弧形切角两种方式

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();//填充颜色})}
})

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