使用CSS的自定义/不规则边框半径

Question

有没有一种方法可以创建这种边界半径？就像普通border-radius的对立面一样，我无法弄清楚该如何制作。 我在这里搜索相关问题，但是找不到。

希望你能帮助我。

谢谢

Answer 1

我会这样：

body {
 background:pink;
}
.box {
 margin:40px;
 height:80px;
 border:3px solid #000;
 border-bottom:none;
 border-radius:20px 20px 0 0;
 position:relative;
}
.box:before {
  content:"";
  position:absolute;
  bottom:-20px;
  left:-20px;
  right:-20px;
  border-bottom:3px solid #000;
}
.box:after {
  content:"";
  position:absolute;
  left:-20px;
  right:-20px;
  top:100%;
  height:20px;
  background:
    radial-gradient(circle at top right, transparent 60%,#000 61.5%,#000 72%,transparent 74%) top right/20px 100% no-repeat,
    radial-gradient(circle at top left,  transparent 60%,#000 61.5%,#000 72%,transparent 74%) top left/20px 100% no-repeat;
}

<div class="box">

</div>

您可以使用CSS变量添加更多控件：

body {
 background:pink;
}
.box {
 margin:var(--r,20px);
 height:80px;
 border:3px solid #000;
 border-bottom:none;
 border-radius:var(--r,20px) var(--r,20px) 0 0;
 position:relative;
}
.box:before {
  content:"";
  position:absolute;
  bottom:calc(-1 * var(--r,20px));
  left:calc(-1 * var(--r,20px));
  right:calc(-1 * var(--r,20px));
  border-bottom:3px solid #000;
}
.box:after {
  content:"";
  position:absolute;
  left:calc(-1 * var(--r,20px));
  right:calc(-1 * var(--r,20px));
  top:100%;
  height:var(--r,20px);
  background:
    radial-gradient(circle at top right, transparent calc(71% - 3px),#000 calc(71% - 2px),#000 71%,transparent 73%) top right,
    radial-gradient(circle at top left,  transparent calc(71% - 3px),#000 calc(71% - 2px),#000 71%,transparent 73%) top left;
   background-size:var(--r,20px) 100%;
   background-repeat:no-repeat;
}

<div class="box">

</div>
<div class="box" style="--r:50px">

</div>
<div class="box" style="--r:80px">

</div>