[CSS] CSS 로 산타 그리기

0. 목표

 - CSS 로 산타 그리기

 - flow chart

1. 실습

 1) html

<div class="santa">  
  <div class="body">
    <div class="body1"></div>
    <div class="body2"></div>
  </div>
  
  <div class="face">
  
  <div class="hat">
    <div class="body"></div>
    <div class="top"></div>
    <div class="bottom">
      <div class="rectangle"></div>
      <div class="circle1"></div>
      <div class="circle2"></div>
    </div>
  </div>
  
  <div class="mustache"></div>
  <div class="nose"></div>
  
  <div class="eye">
    <div class="left">
      <div class="rectangle"></div>
      <div class="circle1"></div>
      <div class="circle2"></div> 
    </div>
    <div class="right">
      <div class="rectangle"></div>
      <div class="circle1"></div>
      <div class="circle2"></div>   
    </div>     
  </div>  

  <div class="mouth"></div>
    
  <div class="button">
    <div class="button1"></div>
    <div class="button2"></div>
  </div>
</div>

 2) CSS

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

body {
  background: #d0ddf8;
}

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

.santa .body .body1{ 
  position: absolute; 
  bottom: -350px;
  width: 400px; 
  height: 150px; 
  background: #ff0000;
}

.santa .body .body2{ 
  position: absolute; 
  top: 400px;
  width: 400px; 
  height: 200px; 
  /* border-radius: 100%; */
  border-top-right-radius: 200px;
  border-top-left-radius: 200px;
  background: #ff0000;
}

.santa .face{ 
  position: absolute; 
  top: 120px;
  left: 25px;
  width: 350px; 
  height: 350px; 
  border-radius: 100%;
  background: #ffffff;
}

.santa .hat .body{
  position: absolute; 
  top: -80px;
  left: 75px;
  border-bottom: 100px solid red;
  border-left: 200px solid transparent;
}

.santa .hat .bottom .rectangle{ 
  position: absolute; 
  top: 15px;
  left: 60px;
  width: 230px; 
  height: 40px; 
  background: #d3d3d3;
}

.santa .hat .bottom .circle1{ 
  position: absolute; 
  top: 15px;
  left: 40px;
  width: 40px; 
  height: 40px; 
  border-radius: 100%;
  background: #d3d3d3;
}

.santa .hat .bottom .circle2{ 
  position: absolute; 
  top: 15px;
  left: 267px;
  width: 40px; 
  height: 40px; 
  border-radius: 100%;
  background: #d3d3d3;
}

.santa .hat .top{ 
  position: absolute; 
  top: -100px;
  left: 260px;
  width: 50px; 
  height: 50px; 
  border-radius: 100%;
  background: #d3d3d3;
}

.santa .mustache{ 
  position: absolute; 
  top: 200px;
  left: 50px;
  width: 250px; 
  height: 200px; 
  border-radius: 100%;
  background: #d3d3d3;
}

.santa .nose{ 
  position: absolute; 
  top: 180px;
  left: 155px;
  width: 40px; 
  height: 40px; 
  border-radius: 100%;
  background: #ff0000;
}

.santa .eye .left .circle1{ 
  position: absolute; 
  top: 125px;
  left: 100px;
  width: 20px; 
  height: 20px; 
  border-radius: 100%;
  background: #000000;
}

.santa .eye .left .circle2{ 
  position: absolute; 
  top: 135px;
  left: 100px;
  width: 20px; 
  height: 20px; 
  border-radius: 100%;
  background: #000000;
}

.santa .eye .left .rectangle{ 
  position: absolute; 
  top: 135px;
  left: 100px;
  width: 20px; 
  height: 10px;
  background: #000000;
}

.santa .eye .right .circle1{ 
  position: absolute; 
  top: 125px;
  left: 210px;
  width: 20px; 
  height: 20px; 
  border-radius: 100%;
  background: #000000;
}

.santa .eye .right .circle2{ 
  position: absolute; 
  top: 135px;
  left: 210px;
  width: 20px; 
  height: 20px; 
  border-radius: 100%;
  background: #000000;
}

.santa .eye .right .rectangle{ 
  position: absolute; 
  top: 135px;
  left: 210px;
  width: 20px; 
  height: 10px;
  background: #000000;
}

.santa .mouth{ 
  position: absolute; 
  top: 250px;
  left: 155px;
  width: 25px; 
  height: 25px; 
  border-radius: 100%;
  background: #000000;
}

.santa .button .button1{ 
  position: absolute; 
  top: 420px;
  left: 155px;
  width: 40px; 
  height: 40px; 
  border-radius: 100%;
  background: #000000;
}

.santa .button .button2{ 
  position: absolute; 
  top: 500px;
  left: 155px;
  width: 40px; 
  height: 40px; 
  border-radius: 100%;
  background: #000000;
}

2. 완성

3. 참고

 - CSS로 그리는 그림, Pure CSS Drawing