wisebirds logo

by uiwwnw

HTML

<span>
  <i class="head"></i><i class="wing"></i><i class="body"></i><i class="tail"></i>
</span>

SCSS

$size: 50px;
i {
  float: left;
  width: 0;
  height: 0;

  &.head {
    margin-top: $size * 1/3;
    border-top: $size * 2/3 solid #2ac5f4;
    border-left: $size * 2/3 solid transparent;
  }

  &.wing {
    border-top: $size solid #f9ed33;
    border-right: $size solid transparent;
  }

  &.body {
    margin-top: $size * 1/2;
    margin-right: -$size;
    margin-bottom: $size * 1/2;
    margin-left: -$size;
    border-bottom: $size * 1/2 solid #f15a29;
    border-right: $size * 1/2 solid transparent;
    border-left: $size * 1/2 solid transparent;
  }

  &.tail {
    margin-top: $size * 3/4;
    margin-right: -$size * 1/4;
    margin-bottom: $size * 3/4;
    margin-left: -$size * 1/4;
    border-top: $size * 1/4 solid #00a79d;
    border-right: $size * 1/4 solid transparent;
    border-left: $size * 1/4 solid transparent;
  }
}