Как можно сделать вот такой элемент на CSS

.orient { 
  width: 200px; 
  height: 300px; 
  border: 6px solid gold; 
  transform: translate(80px, 30px); 
  position: relative; 
} 
 
.bottom { 
  background: #fff; 
  position: absolute; 
  bottom: 60px; 
  transform: translateX(-50%); 
  padding: 10px; 
} 
 
.bottom a { 
  color: gold; 
} 
 
.top { 
  width: 100px; 
  height: 130px; 
  background: #fff; 
  transform: translate(-50%, 30px); 
}

<div class="orient"> 
  <div class="top"></div> 
  <div class="bottom"> 
    <a href="">learn more</a> 
  </div> 
</div>