[CSS] 빵떡오리 그리기

0. 목표

 - 빵떡오리 그리기

1. 데생

2. HTML

<div class="duck">
  <div class="face">
    <div class="face1"></div>
    <div class="face2"></div>      
  </div>
  <div class="cheek">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="mouth">
    <div class="mouth1"></div>
    <div class="mouth2"></div>
  </div>
  <div class="eye">
    <div class="left">
      <div class="left1"></div>
      <div class="left2"></div>
      <div class="left3"></div>
    </div>
    <div class="right">
      <div class="right1"></div>
      <div class="right2"></div>
      <div class="right3"></div>
    </div>
  </div>
  <div class="glasses">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>
  </div>
</div>

3. CSS

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

body {
  background: #FFFFFF;
}

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

.duck .face .face1{ 
  position: absolute; 
  top: 120px;
  left: 25px;
  width: 400px; 
  height: 400px; 
  border-radius: 100%;
  background: #FBEE99;
}

.duck .face .face2{ 
  position: absolute; 
  top: 250px;
  left: -25px;
  width: 500px; 
  height: 300px; 
  border-radius: 100%;
  background: #FBEE99;
}

.duck .cheek .left{ 
  position: absolute; 
  top: 320px;
  left: 0px;
  width: 150px; 
  height: 150px; 
  border-radius: 100%;
  background: #EBAA97;
}

.duck .cheek .right{ 
  position: absolute; 
  top: 320px;
  left: 300px;
  width: 150px; 
  height: 150px; 
  border-radius: 100%;
  background: #EBAA97;
}

.duck .face .face2{ 
  position: absolute; 
  top: 255px;
  left: -25px;
  width: 500px; 
  height: 275px; 
  border-radius: 100%;
  background: #FBEE99;
}

.duck .mouth .mouth1{ 
  position: absolute; 
  top: 370px;
  left: 175px;
  width: 100px; 
  height: 50px; 
  border-radius: 100%;
  background: #E95933;
}

.duck .mouth .mouth2{ 
  position: absolute; 
  top: 385px;
  left: 175px;
  width: 100px; 
  height: 50px; 
  border-radius: 100%;
  background: linear-gradient( to bottom, red, #E5935F );
}

.duck .eye .left .left1{ 
  position: absolute; 
  top: 300px;
  left: 130px;
  width: 50px; 
  height: 50px; 
  border-radius: 100%;
  background: #000000;
}

.duck .eye .left .left2{ 
  position: absolute; 
  top: 320px;
  left: 155px;
  width: 20px; 
  height: 20px; 
  border-radius: 100%;
  background: #FFFFFF;
}

.duck .eye .left .left3{ 
  position: absolute; 
  top: 330px;
  left: 140px;
  width: 10px; 
  height: 10px; 
  border-radius: 100%;
  background: #FFFFFF;
}

.duck .eye .right .right1{ 
  position: absolute; 
  top: 300px;
  left: 270px;
  width: 50px; 
  height: 50px; 
  border-radius: 100%;
  background: #000000;
}

.duck .eye .right .right2{ 
  position: absolute; 
  top: 320px;
  left: 275px;
  width: 20px; 
  height: 20px; 
  border-radius: 100%;
  background: #FFFFFF;
}

.duck .eye .right .right3{ 
  position: absolute; 
  top: 310px;
  left: 300px;
  width: 10px; 
  height: 10px; 
  border-radius: 100%;
  background: #FFFFFF;
}

.duck .glasses .left{ 
  position: absolute; 
  top: 220px;
  left: 40px;
  height: 170px;  
  width: 170px;  
  border:5px solid black;   
  border-radius: 100%;
}

.duck .glasses .right{ 
  position: absolute; 
  top: 220px;
  left: 240px;
  height: 170px;  
  width: 170px;  
  border:5px solid black;   
  border-radius: 100%;
}

.duck .glasses .middle{ 
  position: absolute; 
  top: 300px;
  left: 210px;
  height: 5px;  
  width: 30px;
  background: #000000;
}

4. 결과

5. 참고

 - CSS / linear-gradient - 선형 그라데이션 효과 만들기