使用 CSS 的 clip-path 属性创建有趣的图像形状

使用集合保持井井有条 根据您的偏好保存内容并进行分类。

在 CSS 中使用剪切可以帮助我们摆脱设计中所有事物都看起来像盒子的局面。通过使用各种基本形状或 SVG，您可以创建剪切路径。然后剪掉您不想显示元素的部分。

Rachel Andrew

网页上的元素都定义在一个矩形框内。然而，这并不意味着我们必须让所有东西都看起来像盒子。您可以使用 CSS clip-path 属性来剪切掉图像或其他元素的部分，以创建有趣的效果。

在上面的示例中，气球图像是正方形的 (来源)。使用 clip-path 和基本形状值 circle()，气球周围多余的天空被剪切掉，在页面上留下一个圆形图像。

由于图像是一个链接，您可以看到关于 clip-path 属性的其他内容。只有图像的可见区域可以被点击，因为事件不会在图像的隐藏部分触发。

剪切可以应用于任何 HTML 元素，而不仅仅是图像。创建 clip-path 有几种不同的方法，在这篇文章中我们将了解它们。

浏览器兼容性

对于旧版浏览器，一种回退方案可能是允许浏览器忽略 clip-path 属性并显示未剪切的图像。如果这是一个问题，您可以在特性查询中测试 clip-path，并为不支持的浏览器提供替代布局。

@supports(clip-path: circle(45%)) {
  /* code that requires clip-path here. */
}

基本形状

clip-path 属性可以接受多个值。初始示例中使用的值是 circle()。这是基本形状值之一，这些值在 CSS 形状规范中定义。这意味着您可以剪切一个区域，也可以将相同的值用于 shape-outside，以使文本围绕该形状环绕。

基本形状的完整列表是

• inset()
• circle()
• ellipse()
• polygon()

inset()

inset() 值从元素的边缘插入剪切区域，并且可以为上、右、下和左边缘传递值。还可以通过使用 round 关键字，添加 border-radius 来弯曲剪切区域的角。

在我的示例中，我有两个都带有 .box 类的框。第一个框没有剪切，第二个框使用 inset() 值进行剪切。

circle()

如您所见，circle() 值创建一个圆形剪切区域。第一个值是长度或百分比，是圆的半径。第二个可选值允许您设置圆的中心。在下面的示例中，我使用关键字值将我的剪切圆设置为右上角。您也可以使用长度或百分比。

注意平坦边缘！

请注意所有这些值，形状将由元素上的外边距框剪切。如果您在图像上创建一个圆，并且该形状将超出图像的自然大小，您将得到一个平坦的边缘。

ellipse()

椭圆本质上是一个被压扁的圆，因此其行为非常类似于 circle()，但接受 x 轴半径和 y 轴半径，以及椭圆中心的值。

polygon()

polygon() 值可以帮助您创建相当复杂的形状，通过设置每个点的坐标来定义您需要的任意数量的点。

为了帮助您创建多边形并了解可能性，请查看 Clippy，一个 clip-path 生成器，然后复制并将代码粘贴到您自己的项目中。

来自框值的形状

CSS 形状中还定义了来自 框值的形状。这些与 CSS 盒模型相关 - 内容框、内边距框、边框框和外边距框，关键字值为 content-box、border-box、padding-box 和 margin-box。

这些值可以单独使用，也可以与基本形状一起使用，以定义形状使用的参考框。例如，以下代码会将形状剪切到内容边缘。

.box {
  clip-path: content-box;
}

在此示例中，圆将使用 content-box 作为参考框，而不是 margin-box（这是默认值）。

.box {
  clip-path: circle(45%) content-box;
}

目前，浏览器不支持将框值用于 clip-path 属性。但是，shape-outside 支持它们。

使用 SVG 元素

为了比基本形状更精细地控制剪切区域，请使用 SVG clipPath 元素。然后使用 url() 作为 clip-path 的值来引用该 ID。

动画剪切区域

CSS 过渡和动画可以应用于 clip-path 以创建一些有趣的效果。在下一个示例中，我通过在具有不同半径值的两个圆之间过渡来动画化悬停时的圆。

动画可以与剪切一起使用，有很多创造性的方法。使用 clip-path 制作动画 在 CSS Tricks 上介绍了一些想法。

照片由 Matthew Henry 在 Burst 上拍摄。