CSS Battle #71 – Elephant

[david-001]

Link to battle:

Let's battle! ⚔️

Copy the code block below to format your comment on the discussion thread:

<details>
<summary>Code Source  – <strong>score {character count}</strong></summary>
<!-- have to be followed by an empty line! -->

```html
your cssbattles code here!
```

</details>

What others will see:

This will result in a nice hidden bit like so:

Code Source – score {character count}

your cssbattles code here!

[david-001]

Code Source – 523.56 {2303}

<div h></div>
<div k>
  <div a>
    <div b>
      <div c>
        <div d></div>
      </div>
      <div e>
        <div d></div>
      </div>
    </div>
    <div f><div g></div></div>
  </div>
</div>
<div i></div>

<style>
  body{
    /* margin:0;
    padding:0; */
    background:#998235;
  }
  
  /* Head eyes trunk horn */
  [k]{
    margin-left: auto;
    margin-right: auto;
    margin-top: -180px;
    width: 180px;
    display: flex; 
    justify-content: center;
    align-items: center;
  }

  /* Head */
  [a] {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: #1A4341;
  }

  /* Eyes */
  [b]{
    margin-top: 70px;
    display: flex;
    justify-content: center;
  }
  /* Sclera */
  [c]{
    background: linear-gradient(to bottom, #1A4341 50%, #998235 0);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* Pupil */
  [d]{
    background: linear-gradient(to bottom, #1A4341 50%, #0B2429 0);
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }
  /*Sclera */
  [e]{
    background: linear-gradient(to bottom, #1A4341 50%, #998235 0);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* Horn */
  [f]{
    width: 75px;
    height: 75px;
    border: solid #fff 20px;
    border-radius: 50%;
    border-top-color: transparent;
    border-left-color: transparent;
    rotate: 225deg;
    margin-top: 20px;
    margin-left: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* Trunk */
  [g]{
    width: 40px;
    height: 135px;
    background: #0B2429;
    rotate: -45deg;
    border-radius: 50px;
    /* margin-top:20px; */
  }
  /* Ears */
  [h]{
    width: 80px;
    height: 180px;
    /* background: #1A4341; */
    background: radial-gradient(ellipse at 50px 50%, #0B2429 50%, #1A4341 0);
    border-radius: 50%;
    margin-top: 60px;
    margin-left: 40px;
  }
  
  /* Ears */
  [i]{
    width: 80px;
    height: 180px;
    /* background: #1A4341; */
    background: radial-gradient(ellipse at 20px 50%, #0B2429 50%, #1A4341 0);
    border-radius: 50%;
    margin-top: -180px;
    margin-left: 260px;
  }
</style>

[Narigo]

I could only get to 99% :(

Code Source – 595.33 {1434}

<div class=head>
<div class=teeth></div>
<div class=nose></div>
<div class="ear l"></div>
<div class="ear r"></div>
<div class=face></div>
</div>
<style>
  body {
    display: grid;
    place-items:center;
    background:#998235;
  }
  .head {
    position:relative;
  }
  .nose {
    position: absolute;
    border-radius:20px;
    left:70;
    top:120;
    height:250;
    width:40;
    background:#0B2429;
  }
  .teeth {
    position:absolute;
    top:130;
    left:30;
    height:60;
    width:160;
    overflow:hidden;
  }
  .teeth::before {
    position:absolute;
    content:'';
    border-radius: 99q;
    border: 20px solid #fff;
    width: 50%;
    height: 99;
  }
  .face,.ear {
    border-radius: 50%;
    width: 180px;
    height: 180px;
    background: #1A4341;
  }
  .face {
    background:
      linear-gradient(#1A4341 50%, #0000 0),
      radial-gradient(circle at 60px 50%, #0B2429 10px, #998235 0 20px, #0000 0),
      radial-gradient(circle at 120px 50%, #0B2429 10px, #998235 0 20px, #0000 0),
      #1A4341;
  }
  .ear {
    position:absolute;
    background:#1A4341;
    content:'';
    overflow:hidden;
    width: 80px;
    z-index:-1;
  }
  .ear::before {
    position: absolute;
    background: #0B2429;
    border-radius: 50%;
    content: '';
    height: 100%;
    width: 100%;
  }
  .ear.l {
    left:-60px;
  }
  .ear.l::before {
    left:15px;
  }
  .ear.r::before {
    right:15px;
  }
  .ear.r {
    right:-60px;
  }
</style>