CSS Battle - #12 Wiggly Moustache

#css #cssbattle

HTML

<div class="wrapper">
  <div class="c-1"></div>
  <div class="c-2"></div>
  <div class="c-3"></div>
</div>

CSS

  body {
    margin: 0;
    background: #F5D6B4;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .wrapper {
    position: relative;
    width: 255px;
    height: 100px
  }

  .c-1 {
    width: 100px;
    height: 50px;
    background: #dd6b4d;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: rotate(180deg);
  }

  .c-1:after {
    content: '';
    width: 60px;
    height: 30px;
    background: #F5D6B4;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: absolute;
    left: 20px;
    bottom: 0;
  }

  .c-1:before {
    content: '';
    width: 20px;
    height: 10px;
    background: #D86F45;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: absolute;
    right: 0;
    bottom: -10px;
    transform: rotate(180deg);
  }

  .c-2 {
    width: 99px;
    height: 50px;
    background: #dd6b4d;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: absolute;
    left: 80px;
    top: 0;
  }

  .c-2:before {
    content: '';
    width: 55px;
    height: 30px;
    background: #F5D6B4;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: absolute;
    left: 20px;
    bottom: 0;
  }

  .c-3 {
    width: 100px;
    height: 50px;
    background: #dd6b4d;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: rotate(180deg);
  }

  .c-3:after {
    content: '';
    width: 59px;
    height: 30px;
    background: #F5D6B4;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: absolute;
    right: 24px;
    bottom: 0;
  }

  .c-3:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 17px;
    height: 10px;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    background: #D86F45;
    transform: rotate(180deg);
  }

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site