012.wiggly-moustache.md

Battle #1 - Pilot Battle

#12 - Eye of Sauron

Link to problem

My Solution

<div l></div>
<div m></div>
<div r></div>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F5D6B4;
  }
  div {
    position: relative;
    width: 60px;
    height: 30px;
    border-radius: 0 0 99px 99px;
    border: 20px solid #D86F45;
    border-top: none;
    margin-top: 50px;
  }
  div[m] {
    rotate: 180deg;
    margin: 0 -20px 49px;
  }
  div[l]::before, div[r]::after {
    content: '';
    width: 20px;
    height: 10px;
    border-radius: 25px 25px 0 0;
    background: #D86F45;
    position: absolute;
    top: -10px;
  }
  div[l]::before { left: -20px;}
  div[r]::after { right: -20px; }
</style>