CSS实现卡片内图片自定义裁剪 解决图片溢出DIV容器问题

方案1：双层容器旋转实现（兼容性最好） #

你之前的写法问题出在属性层级设置错误，未对图片做反向旋转修正，调整后实现代码如下：

HTML结构 #

<div class="card">
  <!-- 卡片其他内容 -->
  <div class="img-cut-wrapper">
    <img src="你的图片资源地址" alt="卡片配图">
  </div>
</div>

CSS样式 #

.card {
  position: relative;
  overflow: hidden; /* 全局控制卡片内元素不溢出边界 */
  /* 补充你原有卡片的样式：宽高、背景、内边距、圆角等 */
}

.img-cut-wrapper {
  position: absolute;
  top: -65%;
  right: -25%;
  width: 162px;
  height: 162px;
  transform: rotate(-45deg);
  border-radius: 40px;
  overflow: hidden; /* 核心裁剪属性，超出容器的内容全部隐藏 */
}

.img-cut-wrapper img {
  width: 100%;
  height: 100%;
  /* 反向旋转抵消父容器的旋转角度，保证图片显示方向正常，scale数值可根据实际填充效果调整 */
  transform: rotate(45deg) scale(1.4);
  /* 控制图片等比例填充容器，避免拉伸变形 */
  object-fit: cover;
  /* 如需调整图片裁剪的展示区域，可额外添加translate属性调整位置 */
}

方案2：clip-path 实现（代码更简洁） #

如果不需要兼容极低版本浏览器，可直接使用clip-path实现自定义裁剪，不需要嵌套容器：

.card img {
  position: absolute;
  top: -10%;
  right: -10%;
  width: 180px;
  /* 自定义裁剪路径，对应设计稿的菱形角度，数值可按需调整 */
  clip-path: polygon(100% 0, 100% 70%, 30% 100%, 0 30%);
  border-radius: 40px;
  object-fit: cover;
}

内容的提问来源于stack exchange，提问作者PedroEstevesAntunes