[CSS] 탱크 그리기

0. 목표

 - CSS로 탱크 그리기

1. 스케치

 - 대략 이런느낌

2. html 작성(codepen)

 1) 탱크 안에

 2) 캐터필터1 : 양 옆 동그라미 + 몸통

 3) 캐터필터2 : 양 옆 동그라미 + 몸통

 4) 바퀴 다섯개

 5) 몸통 2개

 6) 포대 2개

 7) ROK 글자 한개 

<div class="tank">  
  <div class="catter1">
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="rectangle"></div>
  </div>
  
  <div class="catter2">
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="rectangle"></div>
  </div>
  
  <div class="wheel">
    <div class="wheel1"></div>
    <div class="wheel2"></div>
    <div class="wheel3"></div>
    <div class="wheel4"></div>
    <div class="wheel5"></div>
  </div>
  
  <div class="body1"></div>
  <div class="body2"></div>
  
  <div class="gun1"></div>
  <div class="gun2"></div>
  
  <div class="letter">
    <font size="20px">
    ROK
    </font>
  </div>
</div>

3. CSS 작성

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

body {
  background: #d0ddf8;
}

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

.tank .catter1 .rectangle{ 
  position: absolute; 
  bottom: -200px;
  width: 500px; 
  height: 150px; 
  background: #964b00;
}

.tank .catter1 .circle1{ 
  position: absolute; 
  bottom: -200px;
  left: -75px;
  width: 150px; 
  height: 150px; 
  border-radius: 100%;
  background: #964b00;
}

.tank .catter1 .circle2{ 
  position: absolute; 
  bottom: -200px;
  left: 425px;
  width: 150px; 
  height: 150px; 
  border-radius: 100%;
  background: #964b00;
}

.tank .catter2 .rectangle{ 
  position: absolute;
  bottom: -185px;
  left: 10px;
  width: 480px; 
  height: 120px; 
  background: #000000;
}

.tank .catter2 .circle1{ 
  position: absolute; 
  bottom: -185px;
  left: -60px;
  width: 150px; 
  height: 120px; 
  border-radius: 100%;
  background: #000000;
}

.tank .catter2 .circle2{ 
  position: absolute; 
  bottom: -185px;
  left: 410px;
  width: 150px; 
  height: 120px; 
  border-radius: 100%;
  background: #000000;
}

.tank .wheel .wheel1{ 
  position: absolute; 
  bottom: -175px;
  left: 430px;
  width: 100px; 
  height: 100px; 
  border-radius: 100%;
  background: #808080;
}

.tank .wheel .wheel2{ 
  position: absolute; 
  bottom: -175px;
  left: 315px;
  width: 100px; 
  height: 100px; 
  border-radius: 100%;
  background: #808080;
}

.tank .wheel .wheel3{ 
  position: absolute; 
  bottom: -175px;
  left: 200px;
  width: 100px; 
  height: 100px; 
  border-radius: 100%;
  background: #808080;
}

.tank .wheel .wheel4{ 
  position: absolute; 
  bottom: -175px;
  left: 85px;
  width: 100px; 
  height: 100px; 
  border-radius: 100%;
  background: #808080;
}

.tank .wheel .wheel5{ 
  position: absolute; 
  bottom: -175px;
  left: -30px;
  width: 100px; 
  height: 100px; 
  border-radius: 100%;
  background: #808080;
}

.tank .body1{ 
  position: absolute;
  bottom: -120px;
  left: -80px;
  width: 670px; 
  height: 120px; 
  background: #006400;
}

.tank .body2{ 
  position: absolute;
  bottom: 1px;
  left: -50px;
  width: 300px; 
  height: 120px; 
  background: #006400;
}

.tank .gun1{ 
  position: absolute;
  bottom: 30px;
  left: 251px;
  width: 200px; 
  height: 50px; 
  background: #006400;
}

.tank .gun2{ 
  position: absolute;
  bottom: 26px;
  left: 452px;
  width: 20px; 
  height: 60px; 
  background: #006400;
}

.tank .letter{ 
  position: absolute;
  bottom: 26px;
  left: 0px;
  width: 20px; 
  height: 60px; 
  background: #006400;
}

4. 결과