clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。

.demo {
    margin: 15px auto;
    width: 400px;
    height: 400px;
    background: #ffc2c2;
    clip-path:;
}

clip-path: url(#cross); 指定一个 svg 作为裁剪。

<svg height="0" width="0">
  <defs>
    <clipPath id="cross">
      <rect y="100" x="100" width="90" height="90"></rect>
      <rect x="0" y="100" width="90" height="90"></rect>
      <rect x="100" y="0" width="90" height="90"></rect>
      <rect x="0" y="0" width="90" height="90"></rect>
    </clipPath>
  </defs>
</svg>

clip-path: circle(40%); 设定一个圆形的裁剪,内容占据40%空间