Как я могу взять нижний изогнутый элемент прямо под кругом?

Question

Моя попытка такая:

.circle{
  height: 80px;
  width: 80px;
  border: 6px solid #098688;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.box {
  position: relative;
  width: 100px;
  height: 57px;
  border: solid 5px #098688;
  border-color: transparent transparent #098688 transparent;
  border-radius: 7px 7px 167px 154px;
  text-align: left;
}

<div class="circle">
    <h2>15+</h2>
</div>
<div class="box"></div>
<p>Years in Business</p>

Если я уменьшу высоту, чтобы приблизить ее к кругу, то кривая станет плоской. Но мне нужно это так, как показано на рисунке.

Answer 1

Вы можете сделать это с одним элементом, как показано ниже:

.box {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  padding:5px; /*distance between full border and bottom boroder*/
  /*full border */
  background:
    radial-gradient(farthest-side,transparent calc(100% - 6px), #098688 calc(100% - 5px))
    content-box;
  /* bottom border */
  border: 5px solid transparent;
  border-bottom-color:#098688;
  
  display:flex;
  align-items:center;
  justify-content:center;
}

<div class="box">
<h2>15+</h2>
</div>

Еще одна идея с box-shadow:

.box {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  /*full border */
  box-shadow:
    0 0 0 5px  #ffffff inset,
    0 0 0 10px #098688 inset; 
  /* bottom border */
  border: 5px solid transparent;
  border-bottom-color:#098688;
  
  display:flex;
  align-items:center;
  justify-content:center;
}

<div class="box">
<h2>15+</h2>
</div>

Answer 2

Это будет работать с абсолютным позиционированием, как показано ниже, относительное позиционирование не позволит вам перекрывать div

.box {
  position: absolute;
  top: 12.5%;
  left: 0%;
  width: 100px;
  height: 57px;
  border: solid 5px #098688;
  border-color: transparent transparent #098688 transparent;
  border-radius: 7px 7px 167px 154px;
  text-align: left;
}