26/9/2024

<div class="con">
  <div class="top">
    <div class="line"></div>
    <div class="line"></div>
  </div>
  <div class="mid"></div>
  <div class="lower">
    <div class="small"></div>
    <div class="small"></div>
  </div>
</div>
<style>
  * {background: #434B92;}
  .con {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 1.5rem;
  }
  .top {display: flex; transform: translateY(1rem)}
  .line {
    background: #F3AC3C;
    width: 1.9rem;
    height: 9.65rem;
    margin: 0 2.8rem;
  }
<p>.mid {
background: #F3AC3C;
width: 15rem;
height: 2.5rem;
clip-path: ellipse(45% 100% at 50% 100%);
}
.lower {
display: flex;
}
.small {
width: 2.5rem;
height: 1.125rem;
background: #000000;
border-radius: 0 0 1.25rem 1.25rem;
margin: 0 1.25rem;
}</p>
<p></style></p>