如何裁剪元素右侧区域并自动调整其尺寸（纯CSS方案）

云原生阿岚

2026-8-25

解决方案：纯CSS实现动态裁剪并同步调整容器宽度

要实现裁剪元素右侧x%部分同时让容器宽度自动适配，核心是让容器宽度等于裁剪后元素的可视宽度，同时保持布局对齐。以下是两种可行的纯CSS方案：

方案一：使用`width` + `clip-path`

这种方式最简洁，直接通过裁剪和容器宽度控制实现需求：

div{
  display:flex;
  justify-content: space-evenly;
  width:180px; /* 可根据需求调整，或设为auto */
}
i{
  color: yellow;
  display: inline-block; /* 确保图标有明确的宽度计算 */
}
/* 裁剪右侧50%的情况 */
span{
  width: 50%; /* 容器宽度设为原元素的50% */
  clip-path: inset(0 0 0 50%); /* 裁剪掉元素左半部分，只显示右半 */
}

原理说明

width:50%：让span容器宽度自动适配内部图标的50%（动态尺寸下也能生效，无需硬编码数值）
clip-path: inset(0 0 0 50%)：通过内边距裁剪方式，隐藏元素左半部分，只保留右侧50%的可视区域
容器宽度同步缩小后，flex布局的space-evenly会正确计算间隙，不会出现半星与其他星星之间的额外空隙

如果需要裁剪其他比例（比如右侧30%），只需修改两个数值：

span{
  width: 70%; /* 保留70%宽度 */
  clip-path: inset(0 0 0 30%); /* 裁剪左侧30% */
}

方案二：使用`width` + `transform` + `overflow:hidden`

如果需要兼容不支持clip-path的旧浏览器，可以用这种方式：

div{
  display:flex;
  justify-content: space-evenly;
  width:180px;
}
i{
  color: yellow;
  display: inline-block;
}
span{
  width: 50%;
  overflow: hidden;
  display: inline-flex; /* 确保与其他图标垂直对齐 */
}
span i{
  transform: translateX(-50%); /* 图标左移50%，让右半部分显示在容器内 */
}