CSSBattle Apr 17, 2025

문제

풀이

<div class="container">
  <div class="wrapper">
    <div class="top-left"></div>
    <div class="top-right"></div>
    <div class="bottom-left"></div>
    <div class="bottom-right"></div>
  </div>
</div>

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

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  
  width: 100vw;
  height: 100vh;
  
  background: #D96C7B;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  
  width: 240px;
  height: 240px;
}

.top-left {
  width: 100%;
  height: 100%;

  border-radius: 120px 0 0 0;

  background: #FFFFFF;
}

.top-right {
  justify-self: start;
  align-self: end;
  
  width: 66.5%;
  height: 66.5%;

  border-radius: 0 120px 0 0;

  background: #FFFFFF;
}

.bottom-left {
  justify-self: end;
  
  width: 16.5%;
  height: 16.5%;

  border-radius: 0 0 0 120px;

  background: #FFFFFF;
}

.bottom-right {
  width: 33.5%;
  height: 33.5%;

  border-radius: 0 0 120px 0;

  background: #FFFFFF;
}