CSS实现：在同心圆顶部添加外切矩形

我尝试重现一个图形，目前卡在了一个环节：需要在外部同心圆的顶部、现有三边矩形（div1）的下方添加一个外切矩形，这个矩形的高度要恰好触碰到内圆的外侧。

CSS 代码 #

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  height: 500px;
  border: 1px solid gray;
}

.elem {
  box-sizing: border-box;
}

.div1 {
  border-top: 3px solid #0DA8AA;
  border-left: 1px solid #0DA8AA;
  border-right: 1px solid #0DA8AA;
  height: 70px;
  width: 120px;
  background: white;
}

.div2 {
  border: 1px solid #0DA8AA;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.div3 {
  border: 1px solid #0DA8AA;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  background: white;
}

.div4 {
  border-top: 0.5px dashed black;
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.div5 {
  border: 0.5px dashed black;
  width: 120px;
  height: 80px;
}

HTML 代码 #

<div class="container">
  <div class="elem div1"></div>
  <div class="elem div2">
    <div class="elem div3">
      <div class="elem div5">
        <div class="elem div4">
        </div>
      </div>
    </div>
  </div>
</div>

目标图形结构：顶部是一个仅包含上、左、右三边的矩形，下方连接一个完整矩形，该矩形底部与外侧同心圆的顶部相切，且矩形底部边缘刚好接触到内部同心圆的外侧；同心圆内部包含一个虚线矩形和一条斜向的虚线。

内容的提问来源于stack exchange，提问作者Kaevonz