CSSでカピバラを作ってみた。

html

<div class="kapibara">
  <div class="head">
    <div class="eyes"></div>
  </div>
  <div class="ear"></div>
  <div class="nose"></div>
  <div class="body"></div>
  <div class="paws">
    <!-- 前足 -->
    <div class="front-paw">
      <!-- 指 -->
      <div class="finger"></div>
      <div class="finger"></div>
      <div class="finger"></div>
    </div>
    <!-- 後足 -->
    <div class="hind-paw">
      <div class="finger"></div>
      <div class="finger"></div>
    </div>
  </div>
</div>

css

.kapibara{
  position: absolute;
  top: 100px;
  left: 50%;
}

/* 頭 */
.head{
  position: absolute;
  width: 300px;
  height: 200px;
  border-radius: 100%;
  background: #C99D73;
  z-index: 2;
}

/* 目 */
.eyes{
  position: absolute;
  top: 30px;
  left: 120px;
  width: 40px;
  height: 10px;
  border-radius: 100%;
  background: #000;
}

/* 耳 */
.ear{
  position: absolute;
  top: -10px;
  left: 200px;
  width: 50px;
  height: 50px;
  border-top: 40px solid #615252;
  border-radius: 100%;
  transform: rotate(30deg);
  z-index: 1;
}

/* 鼻 */
.nose{
  position: absolute;
  top: 40px;
  left: -13px;
  width: 80px;
  height: 100px;
  border-left: 80px solid #564C4F;
  border-radius: 100%;
}

/* 体 */
.body{
  position: absolute;
  top: 40px;
  left: 60px;
  width: 400px;
  height: 300px;
  border-radius: 100%;
  background: #C99D73;
  transform: rotate(20deg);
  z-index: 1;
}

/* 脚 */
.paws{
  position: absolute;
  z-index: -1;
}

/* 前足 */
.front-paw{
  position: absolute;
  top: 200px;
  left: 100px;
  width: 50px;
  height: 150px;
  border-radius: 40%; 
  background: #2D272C;
}

/* 後足 */
.hind-paw{
  position: absolute;
  top: 280px;
  left: 300px;
  width: 50px;
  height: 80px;
  border-radius: 40%;
  background: #2D272C;
}

/* 指 */
.finger{
  position: absolute;
  width: 30px;
  height: 10px;
  border-radius: 100%;
  background: #2D272C;
}

/* 前足の指 */
.front-paw > .finger:nth-child(1){
  top: 125px;
  left: -9px;
}

.front-paw > .finger:nth-child(2){
  top: 135px;
  left: -8px;
  transform: rotate(-5deg);
}

.front-paw > .finger:nth-child(3){
  top: 145px;
  left: 4px;
  transform: rotate(-10deg);
}

/* 後足の指 */
.hind-paw > .finger:nth-child(1){
  top: 60px;
  left: -15px;
}

.hind-paw > .finger:nth-child(2){
  top: 70px;
  left: -12px;
}