[CSS] 컵에 낀 병아리

0. 목표

 1) 원본

 2) 순서도

1. 실습

 1) html

<div class="cup">  
  <div class="body"></div>
  <div class="leg">
    <div class="left">
      <div class="middle"></div>
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="right">
      <div class="middle"></div>
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </div>
  <div class="handle1"></div>
  <div class="handle2"></div>
</div>

<div class="chick">  
  <div class="body"></div>
  <div class="eye">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="nose">
    <div class="middle"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>

 2) css

*, *:after, *:before {
  box-sizing: border-box;
}

body {
  background: #d0ddf8;
}

.cup {
  position: relative;
  margin: 50px auto;
  width: 400px;
  height: 400px;
}

.cup .body{ 
  position: absolute; 
  left: -100px;
  bottom: -200px;
  width: 300px; 
  height: 400px; 
  background: #8b00ff;
}

.cup .leg .left .middle{ 
  position: absolute; 
  left: 240px;
  bottom: -200px;
  width: 15px; 
  height: 100px; 
  background: #fbce;
}

.cup .leg .left .left{ 
  position: absolute; 
  left: 227px;
  bottom: -200px;
  width: 15px; 
  height: 40px; 
  transform:rotate(33deg);
  background: #fbce;
}

.cup .leg .left .right{ 
  position: absolute; 
  left: 253px;
  bottom: -200px;
  width: 15px; 
  height: 40px; 
  transform:rotate(-33deg);
  background: #fbce;
}

.cup .leg .right .middle{ 
  position: absolute; 
  left: 300px;
  bottom: -200px;
  width: 15px; 
  height: 100px; 
  background: #fbce;
}

.cup .leg .right .left{ 
  position: absolute; 
  left: 287px;
  bottom: -200px;
  width: 15px; 
  height: 40px; 
  transform:rotate(33deg);
  background: #fbce;
}

.cup .leg .right .right{ 
  position: absolute; 
  left: 313px;
  bottom: -200px;
  width: 15px; 
  height: 40px; 
  transform:rotate(-33deg);
  background: #fbce;
}

.cup .handle1{ 
  position: absolute; 
  left: 200px;
  bottom: -150px;
  width: 100px; 
  height: 300px; 
  background: #8b00ff;
}

.cup .handle2{ 
  position: absolute; 
  left: 225px;
  bottom: -150px;
  width: 150px; 
  height: 300px; 
  border-radius: 100%;
  background: #8b00ff;
}

.chick {
  position: relative;
  margin: 100px auto;
  width: 0px;
  height: 0px;
}

.chick .body{ 
  position: absolute; 
  left: 0px;
  bottom: -25px;
  width: 150px; 
  height: 250px; 
  border-radius: 100%;
  background: #fee6d8;
}

.chick .eye .left{ 
  position: absolute; 
  left: 45px;
  bottom: 130px;
  width: 15px; 
  height: 15px; 
  border-radius: 100%;
  background: #000000;
}

.chick .eye .right{ 
  position: absolute; 
  left: 95px;
  bottom: 130px;
  width: 15px; 
  height: 15px; 
  border-radius: 100%;
  background: #000000;
}

.chick .nose .middle{ 
  position: absolute; 
  left: 65px;
  bottom: 106px;
  border-top: 15px solid yellow;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}

.chick .nose .left{ 
  position: absolute; 
  left: 65px;
  bottom: 115px;
  width: 15px; 
  height: 15px; 
  border-radius: 100%;
  background: #FFFFFF;
}

.chick .nose .right{ 
  position: absolute; 
  left: 80px;
  bottom: 115px;
  width: 15px; 
  height: 15px; 
  border-radius: 100%;
  background: #FFFFFF;
}

2. 결과