弯曲边矩形的边框

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>