<div class="box">
  <div class="g">G</div>
  <div class="circle"></div>
    <div class="box"> 
      <div class="square-b"></div>
      <div class="square"></div>
      <div class="compass-b">
        <div class="compass">
      <div>
    </div>
</div>
  

:root{
  --metal: linear-gradient(131deg, rgba(117,114,30,1) 4%, rgba(213,209,109,1) 30%, rgba(119,119,44,1) 58%, rgba(207,183,36,1) 90%);
  --b-grad: linear-gradient(90deg, rgba(72,152,209,1) 0%, rgba(52,44,119,1) 100%);
  --sh: -7px 6px 25px -1px rgba(0,0,0,0.78);
}
body {
  font-family: system-ui;
  background: var(--b-grad);
  color: white;
  text-align: center;
  width: 100%;
  height: 100%;
}

.box{
  position: relative;
  margin: auto;
  margin-top: 15%;
  display: block;
  height: 300px;
  width: 300px;
  filter: drop-shadow(0px 6px 10px rgba(18, 36, 87, 0.7));
}
.compass{
  background: var(--metal);
  position: relative;
  top: 0%;
  height: 100%;
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%, 50% 24%);
  
}
.compass-b{
  background: #6e6e36;
  position: relative;
  top: 10%;
  height: 75%;
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%, 50% 33%);
  
}

.circle{
  background: radial-gradient(circle,   rgba(213,209,109,1) 20%, rgba(117,114,30,1) 100%);
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  top: 7%;
  left: 43%;
  z-index: 20;
}

.g{
  position: absolute;
  top: 40%;
  left: 38%;
  font-family: Times;
  font-size: 100px;
  color: #a5983d;
  text-shadow: 0px 4px 6px rgba(18, 36, 87, 1);
}

.square{
  background: var(--metal);
  position: absolute;
  outline: solid;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  clip-path: polygon(0 50%, 50% 100%, 100% 50%, 85% 50%, 50% 85%, 15% 50%);
  
}
.square-b{
  background: #6e6e36;
  position: absolute;
  outline: solid;
  top: 2%;
  left: 0%;
  height: 100%;
  width: 100%;
  clip-path: polygon(0 48%, 0 50%, 50% 100%, 100% 50%, 100% 48%, 85% 50%, 50% 85%, 15% 50%);
}