つくってワクワク「猫の顔書いてみた」

CSSまったくわからん

業務では最近CSSを扱っておりますが、今まででCSSをまともに書いたことがありませんでした。しかし、基本的な丸や三角形など試しに簡単な図形を実装してみると案外他のものを作ることができると分かって感動しました笑
そこで今回は、業務で培った技術力から猫の顔に挑戦してみました!

猫

画像

HTML

<div class="face_01">
    <div class="ear_left"></div>
  <div class="stripes"></div>
    <div class="ear_right"></div>
  <div class="face_02">
    <div class="eye_box clearfix">
      <div class="eye_left">
      </div>
      <div class="eye_right">
      </div>
    </div>
    <div class="nose_01"></span>

    </div>
    <div class="mouth"></div>
    <div class="whisker_left"> 
    </div>
    <div class="whisker_right"> 
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

.clearfix {
  content: "";
  display: block;
  clear: both;
}

.face_01 {
  margin: 50px auto;
  position: relative;
  width: 420px;
  height: 300px;
  background-color: RGB(234, 190, 111);
  border-radius: 47% 47% 45% 45%;
}

.face_02 {
  position: absolute;
  bottom: 0;
  left: 30px;
  width: 360px;
  height: 300px;
}

.stripes {
  position: absolute;
  left: 195px;
  height: 100px;
  width: 25px;
  border-radius: 45%;
  background-color: brown;
}

.stripes:before {
  content: "";
  position: absolute;
  left: -40px;
  height: 100px;
  width: 25px;
  border-radius: 80% 0 50% 25%;
  background-color: brown;
}

.stripes:after {
  content: "";
  position: absolute;
  left: 40px;
  height: 100px;
  width: 25px;
  border-radius: 80% 0 50% 25%;
  background-color: brown;
  transform: scale(-1, 1);
}

.ear_left, .ear_right {
  position: absolute;
  top: -100px;
  width: 10px;
  border-top: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid RGB(234, 190, 111);
  border-left: 50px solid transparent;
  transform: rotate(-30deg);
}

.ear_right {
  right: 0;
  transform: rotate(30deg);
}

.eye_box {
  position: absolute;
  right: 90px;
  width: 180px;
  height: auto;
}

.eye_left,
.eye_right {
  position: absolute;
  top: 60px;
  width: 25px;
  height: 30px;
  background-color: #000;
  border-radius: 50%;
  top: 150px;
}

.eye_left {
  left: 10px;
}

.eye_right {
  right: 10px;
}

.nose_01 {
  position: absolute;
  top: 180px;
  left: 151px;
  width: 50px;
  height: 50px;
  border-radius: 20%;
  border-top: 25px solid RGB(162, 120, 121);
  border-right: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 25px solid transparent;
}

.mouth {
  position: absolute;
  top: 140px;
  left: 127px;
  height: 100px;
  width: 100px;
  border-bottom: 2px solid black;
  borer-left: 2px solid transparent;
  border-radius: 0 0 45% 45%;
}

.whisker_left,
.whisker_right {
  position: absolute;
  top: 210px;
  width: 130px;
  height: 180px;
  border-top: 2px solid #000;
}

.whisker_left {
  left: -80px;
}

.whisker_left:before {
  position: absolute;
  top: 30px;
  left: 35px;
  width: 140px;
  height: 180px;
  border-top: 2px solid #000;
  content: "";
  transform: rotate(-20deg);
}

.whisker_left:after {
  position: absolute;
  top: -45px;
  left: -30px;
  width: 140px;
  height: 180px;
  border-top: 2px solid #000;
  content: "";
  transform: rotate(20deg);
}

.whisker_right {
  right: -100px;
}

.whisker_right:before {
  position: absolute;
  top: 30px;
  right: 35px;
  width: 140px;
  height: 180px;
  border-top: 2px solid #000;
  content: "";
  transform: rotate(20deg);
}

.whisker_right:after {
  position: absolute;
  top: -45px;
  right: -30px;
  width: 140px;
  height: 180px;
  border-top: 2px solid #000;
  content: "";
  transform: rotate(-20deg);
}

作ってみた感想

まだまだ未熟な者でリファクタリングを行なったらシンプルに書けそうな感じがしますが、、、(コメントでアドバイスいただけると助かります!)
基本的な図形(丸や三角)を組み合わせると、いろんなものを作ることができそうだと感じ、やはり基礎技術を固めていくことが大事だとわかりました!

ここまで見てくださってありがとうございました!!