CSS实现带独立圆角的响应式斜切角盒子问题求助

针对你需要的左上/右下45度斜切、斜切边带轻微圆角、右上/左下可独立控制圆角的需求，这里提供一个基于CSS clip-path: path()的响应式解决方案，用CSS变量统一控制参数，方便调整：

<div class="box">
  Hello World!
</div>

:root {
  --cut-length: 40px; /* 斜切的长度 */
  --cut-radius: 8px; /* 斜切边的圆角大小 */
  --corner-radius: 20px; /* 右上/左下的圆角大小 */
  --bg-color: #FFCC00;
}

.box {
  position: relative;
  width: 200px;
  height: 100px;
  padding: 40px 0 10px 40px;
  /* 限制内容显示区域，避免被裁剪 */
  clip-path: path("M var(--cut-length) 0 
                  L 100% 0 
                  L 100% calc(100% - var(--cut-length)) 
                  L calc(100% - var(--cut-length)) 100% 
                  L 0 100% 
                  L 0 var(--cut-length) 
                  Z");
}

.box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-color);
  /* 用二次贝塞尔曲线绘制带精确圆角的背景形状 */
  clip-path: path(
    "M calc(var(--cut-length) + var(--cut-radius)) var(--cut-radius) 
    Q var(--cut-length) 0 var(--cut-radius) var(--cut-length) 
    L var(--corner-radius) calc(100% - var(--corner-radius)) 
    Q 0 100% var(--corner-radius) 100% 
    L calc(100% - var(--cut-length) - var(--cut-radius)) calc(100% - var(--cut-radius)) 
    Q calc(100% - var(--cut-length)) 100% calc(100% - var(--cut-radius)) calc(100% - var(--cut-length)) 
    L calc(100% - var(--corner-radius)) var(--corner-radius) 
    Q 100% 0 calc(100% - var(--corner-radius)) 0 
    Z"
  );
}

方案说明： #

1. 全参数可控：通过CSS变量可以快速调整斜切幅度、斜切边圆角、常规边角圆角，完全满足你对不同圆角独立控制的需求。
2. 响应式友好：把.box的宽高改成百分比、vw/vh等响应式单位后，整个形状会自动适配容器尺寸，无需额外修改路径代码。
3. 内容安全：主元素的clip-path负责限定内容显示范围，伪元素单独绘制带圆角的背景，避免内容被圆角或斜切区域遮挡。

你之前用polygon的写法过于繁琐，且无法精准拆分不同位置的圆角逻辑，改用path()的二次贝塞尔曲线指令，可以精确控制每个圆角的弧度，完美实现目标效果。

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