使用clip-path创建特殊边框时如何实现圆角效果？

我想要创建右下角带有切角、其余三个角为圆角的容器形状。目前我用clip-path实现了右下角的特殊切角，但没法给其他角添加圆角。试过SVG滤镜，圆角处理一直有问题。

当前使用的代码：

<div class="box"></div>

.box {
  position: relative;
  height: 300px;
  background: white;
  
    clip-path: polygon(0 0,
    100% 0,
    100% calc(100% - 4.65rem),
    calc(100% - 3.45rem) 100%,
    0 100%,
    0 0);
}
.box:before {
  content: "";
  position: absolute;
  inset: 0;
  background: grey;
        clip-path: polygon(0 0,
        100% 0,
        100% calc(100% - 4.65rem),
        calc(100% - 3.45rem) 100%,
        0 100%,
        0 0,
        .1rem  .1rem ,
        .1rem calc(100% - .1rem),
        calc(100% - 3.45rem - 0.04rem) calc(100% - .1rem),
        calc(100% - .1rem) calc(100% - 4.65rem - 0.04rem),
        calc(100% - .1rem) .1rem,
        .1rem .1rem);
}

可以用clip-path的path()函数直接绘制包含圆角和右下角切角的路径，同时实现两种效果，无需嵌套复杂的伪元素裁剪：

单色块实现（仅背景色） #

<div class="box"></div>

.box {
  height: 300px;
  background: grey;
  /* 自定义变量，方便调整参数 */
  --radius: 16px;
  --cut-height: 4.65rem;
  --cut-width: 3.45rem;
  clip-path: path("M var(--radius) 0 
                  L 100% 0 
                  L 100% calc(100% - var(--cut-height)) 
                  L calc(100% - var(--cut-width)) 100% 
                  L 0 100% 
                  L 0 var(--radius) 
                  A var(--radius) var(--radius) 0 0 1 var(--radius) 0 Z");
}

带边框的实现（白色背景+灰色边框） #

如果需要原代码里的边框效果，用双层结构实现，外层做边框色，内层做白色背景：

<div class="box">
  <div class="box-inner"></div>
</div>

.box {
  height: 300px;
  padding: 0.1rem; /* 边框宽度 */
  background: grey;
  --radius: 16px;
  --cut-height: 4.65rem;
  --cut-width: 3.45rem;
  clip-path: path("M var(--radius) 0 
                  L 100% 0 
                  L 100% calc(100% - var(--cut-height)) 
                  L calc(100% - var(--cut-width)) 100% 
                  L 0 100% 
                  L 0 var(--radius) 
                  A var(--radius) var(--radius) 0 0 1 var(--radius) 0 Z");
}
.box-inner {
  height: 100%;
  background: white;
  /* 内层路径减去边框宽度，保证形状对齐 */
  clip-path: path("M calc(var(--radius) + 0.1rem) 0.1rem 
                  L calc(100% - 0.1rem) 0.1rem 
                  L calc(100% - 0.1rem) calc(100% - var(--cut-height) - 0.1rem) 
                  L calc(100% - var(--cut-width) - 0.1rem) calc(100% - 0.1rem) 
                  L 0.1rem calc(100% - 0.1rem) 
                  L 0.1rem calc(var(--radius) + 0.1rem) 
                  A var(--radius) var(--radius) 0 0 1 calc(var(--radius) + 0.1rem) 0.1rem Z");
}

关键说明 #

• path()里的A指令用来绘制圆角圆弧，参数对应圆弧的半径、旋转角度、绘制方向等
• 用CSS变量统一管理圆角和切角尺寸，修改时只需调整变量值即可
• 双层结构中，内层路径的坐标需要根据边框宽度偏移，确保内外形状完全匹配

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