<h1>Daily CSS Images :: Day 04</br>Tiger</h1>

<div class="tiger">
  <div class="head">
    <div class="ear left"></div>
    <div class="ear right"></div>
    <div class="stripe-left one"></div>
    <div class="stripe-left two"></div>
    <div class="stripe-left three"></div>
    <div class="stripe-center one"></div>
    <div class="stripe-center two"></div>
    <div class="stripe-right one"></div>
    <div class="stripe-right two"></div>
    <div class="stripe-right three"></div>
    <div class="stripe-eraser"></div>
    <div class="eye left">
      <div class="pupil"></div>
      <div class="eye-shine"></div>
    </div>
    <div class="eye right">
      <div class="pupil"></div>
      <div class="eye-shine"></div>
    </div>
    <div class="cheek left"></div>
    <div class="cheek right"></div>
    <div class="mouth-area">
      <div class="mouth"></div>
      <div class="lip left">
        <div class="lip-end left"></div>
      </div>
      <div class="lip right">
        <div class="lip-end right"></div>
      </div>
    </div>
    <div class="nose"></div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css?family=Arima+Madurai');
body {
  background: #25a9fc;
}

h1 {
  font-family: 'Arima Madurai';
  text-align: center;
  color: white;
}

.tiger {
  position: relative;
  margin: auto;
  width: 600px;
  height: 420px;
}

.head {
  position: absolute;
  top: 20%;
  left: 32.5%;
  height: 45%;
  width: 35%;
  background: #ed8314;
  border: 2px solid #b53c00;
  border-radius: 80% 80% 70% 70%;
}

.ear {
  position: absolute;
  top: 0;
  height: 38%;
  width: 38%;
  background: #f8a32e;
  border: 2px solid #b53c00;
  border-radius: 70%;
  z-index: -1;
}

.ear::after {
  content: "";
  position: absolute;
  top: 17%;
  left: 10%;
  height: 60%;
  width: 70%;
  background: #eb9e9e;
  border-radius: 80% 70% 60% 70%;
  border: 1.5px solid #b53c00;
}

.ear.left {
  left: -18%;
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}

.ear.right {
  right: -18%;
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg);
}

.stripe-left {
  position: absolute;
  border: 23px solid #4f2202;
  border-radius: 5% 0 0 5%;
  border-color: transparent transparent transparent #4f2202;
}

.stripe-left.one {
  top: 18%;
  left: 20%;
  -webkit-transform: rotate(55deg) scale(2, 0.5);
  transform: rotate(55deg) scale(2, 0.5);
}

.stripe-left.two {
  top: 27%;
  left: 11.5%;
  -webkit-transform: rotate(30deg) scale(1.9, 0.45);
  transform: rotate(30deg) scale(1.9, 0.45);
}

.stripe-left.three {
  top: 38%;
  left: 11.8%;
  border-radius: 10% 0% 0% 50%;
  -webkit-transform: rotate(10deg) scale(2.2, 0.4);
  transform: rotate(10deg) scale(2.2, 0.4);
}

.stripe-center {
  position: absolute;
  width: 10%;
  border: 25px solid #4f2202;
  border-radius: 25% 20% 10% 5%;
  border-color: #4f2202 transparent transparent transparent;
}

.stripe-center.one {
  top: 22.5%;
  left: 27%;
  -webkit-transform: rotate(-10deg) scale(0.4, 2.7);
  transform: rotate(-10deg) scale(0.4, 2.7);
}

.stripe-center.two {
  top: 20%;
  right: 27%;
  -webkit-transform: rotate(10deg) scale(0.4, 2.5);
  transform: rotate(10deg) scale(0.4, 2.5);
}

.stripe-right {
  position: absolute;
  border: 23px solid #4f2202;
  border-radius: 0 5% 5% 0;
  border-color: transparent #4f2202 transparent transparent;
}

.stripe-right.two {
  top: 27%;
  right: 11.5%;
  -webkit-transform: rotate(-30deg) scale(1.9, 0.45);
  transform: rotate(-30deg) scale(1.9, 0.45);
}

.stripe-right.three {
  top: 38%;
  right: 11.8%;
  border-radius: 0% 10% 50% 0%;
  -webkit-transform: rotate(-10deg) scale(2.2, 0.4);
  transform: rotate(-10deg) scale(2.2, 0.4);
}

.stripe-right.one {
  top: 18%;
  right: 20%;
  -webkit-transform: rotate(-55deg) scale(2, 0.5);
  transform: rotate(-55deg) scale(2, 0.5);
}

.stripe-eraser {
  position: absolute;
  top: 27%;
  left: 41%;
  height: 22%;
  width: 18%;
  background: #ed8314;
  border-radius: 50% 60%;
}

.eye {
  position: absolute;
  top: 20%;
  height: 35%;
  width: 20%;
  background: #fff;
  border-radius: 80% 80% 70% 70%;
  border: 1px solid #2a0901;
}

.pupil {
  position: absolute;
  top: 18%;
  left: 13%;
  height: 70%;
  width: 70%;
  background: #fea718;
  border: 1px solid #d47700;
  border-radius: 80%;
}

.pupil::after {
  content: "";
  position: absolute;
  top: 17.5%;
  left: 17.5%;
  height: 65%;
  width: 65%;
  background: #2a0901;
  border-radius: 80%;
}

.eye.left {
  left: 15%;
  -webkit-transform: rotate(15deg);
  transform: rotate(15deg);
}

.eye.right {
  right: 15%;
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
}

.eye-shine {
  position: absolute;
  top: 35%;
  left: 23%;
  width: 22%;
  height: 17%;
  background: #fff;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
}

.cheek {
  position: absolute;
  top: 50%;
  height: 45%;
  width: 60%;
  background: #fff;
  border: 1px solid #969696;
}

.cheek.left {
  left: -3%;
  border-radius: 50% 60%;
  border-right: transparent;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}

.cheek.right {
  right: -3%;
  border-radius: 60% 50%;
  border-left: transparent;
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

.mouth-area {
  position: absolute;
  top: 45%;
  left: 25%;
  height: 60%;
  width: 50%;
  background: #fff;
  border: 1px solid #969696;
  border-color: #969696 transparent #969696;
  border-radius: 200% 200% 180% 180%;
}

.lip {
  position: absolute;
  top: 15%;
  height: 40%;
  width: 65%;
  background: #fff;
  border-radius: 50%;
  border: 1px solid #969696;
}

.lip.left {
  left: -5%;
  border-color: transparent transparent #969696;
  -webkit-transform: rotate(15deg);
  transform: rotate(15deg);
}

.lip.right {
  right: -5%;
  border-color: transparent transparent #969696 #969696;
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
}

.lip-end {
  position: absolute;
  top: 65%;
  height: 45%;
  width: 30%;
  border: 1px solid #969696;
  border-radius: 50%;
}

.lip-end.left {
  left: 10%;
  border-color: transparent transparent transparent #969696;
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}

.lip-end.right {
  right: 10%;
  border-color: transparent #969696 transparent transparent;
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg);
}

.mouth {
  position: absolute;
  top: 30%;
  left: 20%;
  height: 50%;
  width: 60%;
  background: #520001;
  border: 1px solid #969696;
  border-radius: 70%;
}

.mouth::before {
  content: "";
  position: absolute;
  top: 59%;
  left: 16%;
  height: 37%;
  width: 65%;
  background: #f26565;
  border: 1px solid #c84646;
  border-radius: 45%;
}

.mouth::after {
  content: "";
  position: absolute;
  top: 64%;
  left: 19%;
  height: 30%;
  width: 45%;
  background: #fd7878;
  border-radius: 50% 40%;
  
}

.nose {
  position: absolute;
  top: 45%;
  left: 33.5%;
  height: 25%;
  width: 30%;
  background: #e7504f;
  border: 1px solid #a62f42;
  border-radius: 100%;
}

.nose::after {
  content: "";
  position: absolute;
  top: 3%;
  left: 7%;
  height: 65%;
  width: 75%;
  background: #df6b65;
  border-radius: 90%;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.