clip-path

CSS 中的 clip-path 属性允许您指定要显示的元素的特定区域，其余部分将被隐藏（或“裁剪”）掉。

.clip-me {  
  
  /* Example: clip away the element from the top, right, bottom, and left edges */
  clip-path: inset(10px 20px 30px 40px); /* or "none" */
  
  /* Example: clip element into a Heptagon */
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);


  /* Deprecated version */
  position: absolute; /* absolute or fixed positioning required */
  clip: rect(110px, 160px, 170px, 60px); /* or "auto" */
  /* values descript a top/left point and bottom/right point */
} 

曾经有一个 clip 属性，但请注意它已 弃用。

最常见的用例是图像，但它并不局限于此。 您也可以轻松地将 clip-path 应用于段落标签，并仅显示一部分文本。

<img class="clip-me" src="/images/image-to-be-clipped.png" alt="Descriptioin of image">

<p class="clip-me">
  I'll be clipped.
</p>

inset() 中的这四个值（在上面的 CSS 中）代表顶部/左侧点和底部/右侧点，它们形成了可见的矩形。 矩形外部的所有内容都将被隐藏。

其他可能的取值

.clip-me { 

  /* referencing path from an inline SVG  */
  clip-path: url(#c1); 

  /* referencing path from external SVG */
  clip-path: url(path.svg#c1);

  /* polygon */
  clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

  /* circle */
  clip-path: circle(30px at 35px 35px);

  /* ellipse */
  clip-path: ellipse(65px 30px at 125px 40px);

  /* inset-rectangle() may replace inset() ? */
  /* rectangle() coming in SVG 2 */

  /* rounded corners... not sure if a thing anymore */
  clip-path: inset(10% 10% 10% 10% round 20%, 20%);

}

示例 SVG 裁剪路径

<clipPath id="clipping">
  <circle cx="150" cy="150" r="50" />
  <rect x="150" y="150" width="100" height="100" />
</clipPath>

clip-path 在一开始不支持 path() 函数，这非常奇怪，因为 path() 已经是 motion-path 等属性 的一个东西。 不过 Firefox 现在支持它了，我们正在等待其他浏览器的支持。 请参见 clip-path: path(); 的初始实现。

制作您自己的

在我们能够可靠地使用 path() 之前，最适合用于创建奇特的自定义形状的裁剪方式是 polygon()。 这里有一个来自 Mads Stoumann 的非常棒的编辑器，它也适用于圆形和椭圆形

更多信息

• CSS 中的裁剪和遮罩
• WPD 上的 clip-path
• MDN 上的 clip-path
• Clippy: Bennett Feely 的 clip-path 制作器
• MDN 上的裁剪和遮罩
• （已弃用）CSS 裁剪属性（Impressive Webs）
• CSS 遮罩规范
• CSS 遮罩 由 Dirk Schulze
• CSS 和 SVG 中的裁剪 – clip-path 属性和元素 由 Sara Soueidan
• CodePen 上带 clip-path 标签的笔
• 演示和浏览器支持演示笔 由 Yoksel
• SVG 遮罩 由 Jakob Jenkov
• Alan Greenblatt 关于裁剪和遮罩功能 浏览器支持级别的研究

浏览器支持