使用通过剪辑路径创建的边框时获得圆角

Question

我正在尝试创建以下形状（

现在我正在使用剪辑路径来创建边框，因为右下角有角。但是我在其他角上获得圆角时遇到问题。有人对如何做到这一点有建议吗？ () 我尝试过使用 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);
}

Answer 1

其中一个选项是仅对右下角使用伪元素，并使用

border

的常规

.box

创建其余部分。

这需要一些

clip-path

和尺寸调整。

.box {
  position: relative;
  height: 300px;
  background: white;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 4.7rem),
    calc(100% - 3.45rem) 100%,
    0 100%,
    0 0);
  border: 1px solid grey;
  border-radius: 10px;
}

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

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