한가한 시간에 자동차 ○를 써 보았습니다.

문득 그 캐릭터는 css로 쓰는 의외로 간단할까 생각하고 손을 움직여 보았다.
그냥 코드 붙여 넣기만 하면 됩니다.
퀄리티가 낮을지도....w
코드도 적당하게 되어 버렸다.

html

<div class="kirby">
  <div class="kirby__body">
    <span class="kirby__leftHand"></span>
    <span class="kirby__rightHand"></span>
    <span class="kirby__leftFoot"></span>
    <span class="kirby__rightFoot"></span>
  </div>
  <div class="kirby__face">
    <span class="kirby__blackEye">
      <span class="kirby__whiteEye"></span>
    </span>
    <span class="kirby__blackEye">
      <span class="kirby__whiteEye"></span>
    </span>
    <span class="kirby__mouth"></span>
    <span class="kirby__rightCheek"></span>
    <span class="kirby__leftCheek"></span>
  </div>
</div>

css

.kirby {
  position: relative;
  display: inline-block;

  // カー○ーの体
  &__body {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 2px solid #333;
    background: #FAA0B5;
    z-index: 2;
  }
  // カー○ーの手
  &__leftHand, &__rightHand {
    position: absolute;
    display: block;
    width: 32px;
    height: 70px;
    background: #FAA0B5;
    border-radius: 50%;
    border: 2px solid #333;
  }
  &__leftHand {
    top: 0;
    left: 0;
  }
  &__rightHand {
    top: 7px;
    right: 0;
    transform: rotate(50deg);
  }
  // カー○ーの足
  &__leftFoot, &__rightFoot {
    position: absolute;
    display: block;
    width: 52px;
    height: 100px;
    background: #982C50;
    border-radius: 50%;
    border: 2px solid #333;
  }
  &__leftFoot {
    bottom: -20px;
    left: 0;
    transform: rotate(135deg);
    z-index: 111;
  }
  &__rightFoot {
    bottom: -20px;
    right: 0;
    transform: rotate(-210deg);
  }
  // カー○ーの顔
  &__face {
    position: absolute;
    top: 2px;
    left: 3px;
    width: 198px;
    height:198px;
    background: #FAA0B5;
    border-radius: 50%;
  }
  &__blackEye {
    &:first-of-type {
      position: absolute;
      top: 50px;
      left: 65px;
      display: block;
      width: 25px;
      height: 50px;
      border-radius: 50%;
      background: #333;
    }
    &:nth-of-type(2) {
      position: absolute;
      top: 50px;
      right: 65px;
      display: block;
      width: 25px;
      height: 50px;
      border-radius: 50%;
      background: #333;
    }
  }
  &__whiteEye {
    position: absolute;
    top: 2px;
    left: 4px;
    display: block;
    width: 15px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
  }
  &__mouth {
    display: block;
    position: absolute;
    top: 100px;
    left: 84px;
    border-right: 16px solid transparent;
    border-bottom: 17px solid #6B272A;
    border-left: 13px solid transparent;
    border-radius: 50%;
    transform: rotate(180deg);
  }
  &__rightCheek, &__leftCheek {
    display: block;
    position: absolute;
    width: 30px;
    height: 15px;
    border-radius: 50%;
    background: #EC6689;
  }
  &__leftCheek {
    top: 92px;
    left: 37px; 
  }
  &__rightCheek {
    top: 92px;
    right: 37px; 
  }
}

표시

중요한 것

자동차 ○를 만드는 데 중요한 속성은
・border-radius
・z-index
・position
・transform
라나베입니까.

그렇게 어려운 일을 하고 있지 않으므로 여러분도 만들어 보세요.

css는 어느 정도의 디자인이라면 재현할 수 있으므로
여러가지 시험해 보면 좋을지도 모르겠네요.