css制作图像遮罩效果

图像遮罩效果可以用CSS的clip-path属性来实现。clip-path可以通过定义一个图形，将其应用于一个元素的区域，以定义哪些部分应该显示，哪些部分应该隐藏。

以下是一个使用clip-path制作图像遮罩效果的示例：

HTML代码：

<div class="image">
  <img src="https://picsum.photos/400/300" alt="Image">
</div>

CSS代码：

.image {
  position: relative;
  width: 400px;
  height: 300px;
  overflow: hidden;
}

.image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
}

在上面的示例中，我们首先将包含图像的容器设置为相对定位，并将其宽度和高度设置为图像的宽度和高度。然后，我们将图像设置为绝对定位，并将其位置设置为容器的左上角。

接下来，我们使用object-fit属性将图像缩放到容器的大小，并使用clip-path属性定义一个多边形，将其应用于图像元素。在这个多边形中，我们定义了四个点来创建一个三角形，它会遮罩图像的下部分。你可以根据自己的需求来调整多边形的形状，以实现不同的遮罩效果。

最后，我们将容器的overflow属性设置为hidden，以确保超出容器边界的部分被裁剪掉。

通过这种方式，我们可以轻松地使用CSS制作各种图像遮罩效果。