CSS - Add tangent rectangle onto top of concentric circles - html

Question

I am trying to recreate this graphic but I am a bit stuck on how to add the tangent rectangle on top of the outer concentric circle and below the 3 sided rectangle object as shown below. Additionally, the height of the rectangle should be tall enough so that it only touches the outside of the inner circle. This is what I have so far on jsFiddle.
jsFiddle: https://jsfiddle.net/Kaevonz/mowahL2v/35/
.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;
}
<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>

Answer 1

You are already using a relative position for div2, so i would use a position: absolute on div5:
.div5 {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
border: 0.5px dashed black;
width: 120px;
height: 80px;
}
The transform property, combined with the left property is to make sure that your element is centered.
Then, i would remove your div4 from div3, because it looks like you're creating relationships between divs that don't seem to be necessary (Unless there is a mathematical reason for that):
<div class="container">
<div class="elem div1"></div>
<div class="elem div2">
<div class="elem div3">
<div class="elem div5">
</div>
<div class="elem div4">
</div>
</div>
</div>
</div>
.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;
position: absolute;
top: 0;
transform: translateX(-50%);
left: 50%;
}
<div class="container">
<div class="elem div1"></div>
<div class="elem div2">
<div class="elem div3">
<div class="elem div5">
</div>
<div class="elem div4">
</div>
</div>
</div>