带弯曲边的矩形边框

Question

我有一个看起来像这样的形状

它是一个矩形，后面有一个圆圈。我需要在所有周围做一个边框。

• 我尝试为矩形做边框，为弯曲部分做曲线 (based on this)。好像不够精确。曲线未与圆形部分 100% 对齐。我需要精确。
• 将相同的形状放在后面稍大一点不符合我的需要。

代码 - jsfiddle

.template {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rectangle {
  background: red;
  width: 91mm;
  height: 63mm;
  border-radius: 2mm;
}

.circle {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -999;
  background: red;
  width: 68mm;
  height: 68mm;
  border-radius: 100%;
}

<div class="template">
  <div class="rectangle"></div>
  <div class="circle"></div>
</div>

有什么想法可以实现这个甜蜜的边界吗？

Answer 1

使用带有径向渐变的伪元素：

.box {
  width:200px;
  height:150px;
  background:red;
  border-radius:10px;
  position:relative;
  margin-top:50px;
}
.box:before {
  content:"";
  position:absolute;
  bottom:100%;
  left:0;
  right:0;
  height:50px; /* Same as margin*/
  background:radial-gradient(circle,red 49.5%,transparent 50%) top/150% 400%;
  
}

<div class="box">

</div>

然后就可以添加边框了：

.box {
  width:200px;
  height:150px;
  background:red;
  border-radius:10px;
  position:relative;
  margin-top:50px;
  border:3px solid blue;
}
.box:before {
  content:"";
  position:absolute;
  bottom:100%;
  left:0;
  right:0;
  height:50px; /* Same as margin*/
  background:radial-gradient(circle,red 49.5%,blue 50% calc(50% + 3px),transparent calc(50% + 4px)) top/150% 400%;
  
}

<div class="box">

</div>

并且还要使用透明色：

.box {
  width:200px;
  height:150px;
  background:rgba(255,0,0,0.5) padding-box;
  border-radius:10px;
  position:relative;
  margin-top:50px;
  border:3px solid blue;
  border-top-color:transparent;
}
.box:before {
  content:"";
  position:absolute;
  bottom:100%;
  left:0;
  right:0;
  height:50px; /* Same as margin*/
  background:radial-gradient(circle,rgba(255,0,0,0.5) 49.5%,blue 50% calc(50% + 3px),transparent calc(50% + 4px)) top/150% 400%; 
}
.box:after {
  content:"";
  position:absolute;
  top:-3px;
  height:100%;
  left:-3px;
  right:-3px;
  border-top:3px solid blue;
  border-right:3px solid transparent;
  border-left:3px solid transparent;
  border-radius:inherit;
  clip-path:polygon(0 0,28px 0,28px 50px,calc(100% - 28px) 50px,calc(100% - 28px) 0, 100% 0,100% 100%,0 100%);
}

body {
 background:url(https://picsum.photos/id/1001/800/800) center/cover;
}

<div class="box">

</div>