CSSBattle

Daily Targets (260112)

코드
<p>
  <i></i>
</p>
<p>
  <i></i>
</p>
<b>
<style>
  body{
    display: flex;
    background:#FADE8B;
    padding: 60px 0;
  }
  *{
    margin: 0;
  }
  p {
    /* 왼쪽 큰 늘어진 라운딩 코너 */
    position: relative;
    width: 180px;
    border: solid #222;
    border-width: 120px 0 0;
    border-radius: 120px 0 0;
    &+&{
      /* 오른쪽 큰 늘어진 라운딩 코너 */
      margin-left: 40px;
      transform: scaleX(-1);
    }

    i {
      /* 작은 라운딩 코너 */
      position: absolute;
      bottom: 60;
      left: 60;
      width: 60px;
      border: solid #FADE8B;
      border-width: 60px 0 0;
      border-radius: 60px 0 0;
    }
  }
  b {
    /* 하단 직사각형 */
    position: fixed;
    top: 180;
    left: 120;
    width: 160;
    height: 60;
    background: #222;
  }
</style>