如何使用CSS和HTML实现从顶部到左下的自定义图片裁剪？

云上老周

2026-5-19

实现从顶部到左下角的自定义图片裁剪效果

嘿，我来帮你搞定这个自定义裁剪需求！要实现从顶部到左下角的图片裁剪，CSS的clip-path属性是最直观高效的方案，下面我给你详细拆解实现步骤：

基础斜切裁剪实现

假设你想要的是从图片顶部右侧边缘斜切到左下角的效果（裁掉右下角区域），代码非常简洁：

HTML 结构

<!-- 用容器包裹图片方便后续样式调整，也可以直接给img标签加类 -->
<div class="custom-crop">
  <img src="your-image-url.jpg" alt="裁剪后的图片">
</div>

CSS 样式

.custom-crop img {
  width: 400px; /* 按需设置图片宽度，也可以用百分比适配 */
  height: auto;
  /* 裁剪路径：依次定义三个点的坐标，形成多边形裁剪区域 */
  /* 坐标规则：(x轴百分比/像素, y轴百分比/像素)，左上角为原点(0,0) */
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

代码解释

clip-path: polygon(0 0, 100% 0, 0 100%) 定义了三个关键锚点：

0 0：图片左上角
100% 0：图片右上角
0 100%：图片左下角

这三个点会自动形成封闭的多边形区域，只有区域内的图片内容会被保留，右下角的三角形区域会被裁剪掉，正好实现从顶部右侧到左下角的斜切效果。

灵活调整裁剪形状

如果你需要更个性化的裁剪（比如从顶部中间位置切到左下角），只需要修改polygon里的坐标点即可：

/* 从顶部中间位置斜切到左下角，裁掉右侧大部分区域 */
clip-path: polygon(0 0, 50% 0, 0 100%);

/* 从顶部右侧距离边缘50px的位置切到左下角，精确控制裁剪位置 */
clip-path: polygon(0 0, calc(100% - 50px) 0, 0 100%);