css clip-path 贝塞尔曲线

CSS的`clip-path`属性可以使用贝塞尔曲线来定义剪切路径。贝塞尔曲线是一种数学曲线，可以用来描述平滑的曲线形状。在`clip-path`中，我们可以使用SVG的`path`元素来定义贝塞尔曲线的路径。

下面是一个使用贝塞尔曲线剪切路径的示例：

<div class="icon">
  <span class="tick"></span>
</div>

<svg>
  <defs>
    <clipPath id="tick-mask" clipPathUnits="objectBoundingBox">
      <path d="M0.2,0.5 L0.4,0.7 L0.8,0.3" />
    </clipPath>
  </defs>
</svg>

.icon {
  width: 100px;
  height: 100px;
  background: #ff7443;
  text-align: center;
  background: #ff7443;
  border-radius: 100px;
}

.tick {
  display: inline-block;
  -webkit-clip-path: url(#tick-mask);
  clip-path: url(#tick-mask);
  width: 90%;
  height: 90%;
  background: white;
  margin-top: 5%;
}

在上面的示例中，我们使用了一个`div`元素作为背景，设置了红色背景和圆角。然后，我们使用一个`span`元素作为勾的形状，并将其剪切为白色。

在`<svg>`标签中，我们使用`<defs>`标签定义了一个剪切路径`tick-mask`，并将`clipPathUnits`设置为`objectBoundingBox`，这样可以将单位设置为比例[0,1]，以适应不同大小的形状。在`<path>`元素中，我们使用贝塞尔曲线的路径描述了勾的形状。

通过设置`-webkit-clip-path`和`clip-path`属性，我们将剪切路径应用到了`span`元素上，从而实现了使用贝塞尔曲线剪切路径的效果。