CSSBattle Apr 11, 2025

문제

풀이

<div class="container">
  <div class="mailbox mailbox-front"></div>
  <div class="mailbox mailbox-side"></div>
  <div class="pillar pillar-front"></div>
  <div class="pillar pillar-side"></div>
</div>

* {
  margin: 0;
  box-sizing: border-box;
}

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  
  background: #A4C5BD;
}

.mailbox {
  position: absolute;
  
  border-radius: 50px 50px 0 0;
}

.mailbox-front {
  top: 80px;
  left: 105px;
  z-index: 1;

  width: 100px;
  height: 140px;
  background: #8D424D;
}

.mailbox-side {
  top: 80px;
  left: 105px;

  width: 190px;
  height: 140px;
  background: #D96C7B;
}

.pillar {
  position: absolute;
}

.pillar-front {
  bottom: 0px;
  right: 155px;
  z-index: 1;

  width: 10px;
  height: 80px;
  background: #8D424D;
}

.pillar-side {
  bottom: 0px;
  right: 135px;

  width: 28px;
  height: 80px;
  background: #D96C7B;
}