最近在开发一个商品模板，有个特殊的case，需要将一个边框的中间进行切割，如果在纯色的背景色完全可以通过相同的颜色覆盖来实现，但是模板实际的背景是渐变的，并且背景可能被替换，也就是说背景最终是什么样子，其实是不知道的。
在模板图中可以看到"怡丽丝尔"四个字压在一个圆角矩形的边框上，压着的部分边框是被切割的，在 css3 中其实存在一个专门用来做裁剪的属性:clip-path ，该属性可以创建一个裁剪区域，只有在区域里面的才会被显示出来。
在 MDN 上有几个简单的例子，常见的切割图形有：矩形、圆形、椭圆、多边形或者路径，最终我采用了多变形的裁切方案，用多边形描述一个凹形来对矩形圆角框进行切割：
要达到完美的效果只需要动态的计算出标题区域的宽度然后去动态调整裁切多边形的参数即可。
