如何为clip-path多边形添加圆角？CSS技术求助

你当前使用clip-path: polygon()的问题在于，该属性是基于多边形路径直接裁剪元素，会完全忽略border-radius的圆角设置，所以无法得到带圆角的目标形状。以下是两种可行的实现思路：

方案一：伪元素+Transform（推荐，易维护） #

通过父元素设置圆角和溢出隐藏，配合同色伪元素的斜切变形，模拟目标形状，完美保留圆角：

.box {
  width: 12vh;
  height: 7vh;
  border-radius: 2vh;
  background: #2563eb; /* 替换为你的目标颜色 */
  position: relative;
  overflow: hidden;
}

.box::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 30%; /* 控制斜切区域的宽度 */
  height: 100%;
  background: inherit; /* 继承父元素背景色 */
  transform: skewX(-18deg); /* 调整角度控制斜切程度 */
  transform-origin: top right;
}

• 调整width可以改变斜切的范围，skewX的角度控制斜切的倾斜程度，灵活度很高
• 完全兼容所有现代浏览器，无需担心兼容性问题

方案二：SVG自定义Clip-path #

如果必须使用clip-path，可以用SVG路径定义包含圆角的裁剪区域，精确匹配目标形状：

.box {
  width: 12vh;
  height: 7vh;
  background: #2563eb;
  clip-path: url(#custom-rounded-slant);
}

在HTML的任意位置添加SVG定义（可以放在<body>开头或结尾）：

<svg width="0" height="0" viewBox="0 0 120 70">
  <defs>
    <clipPath id="custom-rounded-slant" clipPathUnits="objectBoundingBox">
      <!-- 路径控制点对应带圆角的斜切形状，可根据需求调整坐标 -->
      <path d="M5,0 
               Q0,0 0,5 
               L0,65 
               Q0,70 5,70 
               L90,70 
               L120,35 
               L115,0 
               Q120,0 120,5 
               Z" 
            transform="scale(0.00833, 0.01429)" />
    </clipPath>
  </defs>
</svg>

• SVG的viewBox对应盒子的宽高比例（12vh:7vh=120:70），transform: scale用于将SVG坐标转换为objectBoundingBox的0-1范围
• 路径中的Q指令用于绘制圆角，可调整坐标值精细控制圆角大小和斜切位置

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