css - 具有 flex 边的矩形边框

Question

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

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

• 我尝试为矩形制作边框，为 flex 部分制作曲线 (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>