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

网页上的元素均在矩形框内定义。但是,这并不意味着我们必须将所有内容看起来都像一个盒子。您可以使用 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() 值从元素边缘插入裁剪区域,并可以传递顶部边缘、右侧边缘、底部边缘和左侧边缘的值。还可以使用 round 关键字添加 border-radius,使剪裁区域的角变为曲线。

在我的示例中,我有两个框,它们的类均为 .box。第一个框未进行裁剪,第二个框使用 inset() 值进行裁剪。

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

请注意上述所有值,表示元素上的外边距框会对形状进行裁剪。 如果您在图片上创建一个圆形,并且该形状超出图片的自然尺寸,则会获得一条平边。

之前使用的图片现在应用了 circle(50%)。由于图片不是正方形,我们点击顶部和底部的外边距框,圆圈会被裁剪掉。

椭圆形实际上就是一个压缩圆,因此其行为与 circle() 非常类似,但接受 x 的半径和 y 的半径,再加上椭圆中心的值。

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

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

CSS 形状中还包含方框值中的形状。这些内容与 CSS 框模型相关,即关键字值为 content-boxborder-boxpadding-box 和 margin-box 的内容框、内边距框、边框和外边距框。

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

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

在此示例中,圆形将使用 content-box 作为参考框,而非 margin-box(默认值)。

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

目前,浏览器不支持为 clip-path 属性使用框值。不过,shape-outside 支持这些属性。

为了更好地控制裁剪区域,而不是使用基本形状,请使用 SVG clipPath 元素。然后,使用 url() 作为 clip-path 的值来引用该 ID。

CSS 过渡和动画可以应用于 clip-path 以创建一些有趣的效果。在接下来这个示例中,我将通过在两个具有不同半径值的圆之间转换,为悬停的圆形添加动画效果。

可以通过许多富有创意的方式将动画与剪辑结合使用。在 CSS Tricks 中使用 clip-path 添加动画效果,看看一些创意。

照片由 Matthew Henry 拍摄,分享于 Burst。

阅读余下内容
 

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注


京ICP备12002735号