.badge-wrapper
  -  var badges = ['_html', '_css', '_js']
  each badge in badges 
    .badge-box
      .badge(class=badge)
        .badge__num
          .badge__num-top-line
          .badge__num-bottom-line
          .badge__num-path
        .badge__semitransparent
          .badge__semitransparent-path

@import "bourbon";

$color-html-badge: #e44f26;
$color-css-badge: #1572b6;
$color-js-badge: #e4a227;
$color-white-transparent: rgba(255, 255, 255, .25);

html, body {
  height: 100%;
}

:after, :before {
  position: absolute;
  content: '';
}

.badge {
  &-wrapper {
      min-height: 100%;
      @include display(flex);
      @include justify-content(space-around);
      @include align-items(center);
  }
  
  &-box {}
  position: relative;
  width: 250px;
  height: 0;
  border-top: 305px solid $color-html-badge;
  border-left: 29px solid transparent;
  border-right: 29px solid transparent;
  
  &._html {
    z-index: 1;
  }
  
  &._css {
    border-top-color: $color-css-badge;
    z-index: 2;
    &:after {
      border-top-color: $color-css-badge;
    }
  }
 
  &._js {
    border-top-color: $color-js-badge;
    z-index: 3;
    &:after {
      border-top-color: $color-js-badge;
    }
  }
  &:after {
    left: -1px;
    top: -1px;
    width: 1px;
    height: 0;
    border-left: 126px solid transparent;
    border-right: 126px solid transparent;
    border-top: 33px solid $color-html-badge;
    transform: scaleY(.99);   
  }
  
  &__num {
    position: absolute;
    z-index: 2;
    left: 30px;
    top: -245px;
    width: 150px;
    height: 0;
    border-top: 190px solid #ebebeb;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    box-sizing: padding-box;
    &:after {
      left: 0;
      top: -1px;
      width: 0;
      height: 0;
      border-left: 75px solid transparent;
      border-right: 75px solid transparent;
      border-top: 20px solid #ebebeb;
      border-bottom: 75px solid transparent;
    }
    
    ._js & {
      top: -265px;
      border-top: 210px solid #ebebeb;
    }
  
    &-top-line {
      position: absolute;
      z-index: 3;
      top: -151px;
      left: 23px;
      height: 37px;
      width: 150px;
      background: $color-html-badge;
      transform: skewX(5deg);
    }
    
    ._css &-top-line {
      left: -20px;
      background: $color-css-badge;
      transform: skewX(-5deg);
      &:after {
        left: 0;
        top: 35px;
        background: $color-css-badge;
        width: 60px;
        height: 50px;
        transform: skewX(10deg);
      }
    }
   
    ._js &-top-line {      
      top: -130px;
      left: 33px;
      width: 130px;
      height: 15px;
      background: $color-js-badge;
      transform: skewX(0);
      &:before {
        z-index: 5;
        left: -2px;
        top: -40px;
        width: 80px;
        height: 0;
        border: 5px solid transparent;
        border-bottom: 50px solid $color-js-badge;       
      }
      &:after {
        top: -90px;
        right: -16px;
        width: 20px;
        height: 100px;
        background: $color-js-badge;
        transform: skewX(5deg);
      }
    }
   
    &-bottom-line {
      position: absolute;
      left: -10px;
      top: -78px;
      width: 100px;
      height: 20px;
      background: $color-html-badge;
    }
   
    ._css &-bottom-line {
      background: $color-css-badge;
    }
   
    ._js &-bottom-line {
      background: $color-js-badge;
      &:before {
        top: -150px;
        left: -15px;
        width: 25px;
        height: 150px;
        background: $color-js-badge;
        transform: skewX(-5deg);
      }
    }
    
    &-path {
      position: absolute;
      z-index: 5;
      left: 30px;
      top: -78px;
      width: 80px;
      height: 0;
      border-top: 50px solid $color-html-badge;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      &:after {
        left: -1px;
        top: -1px;
        width: 0;
        height: 0;
        border: 41px solid transparent;
        border-top: 10px solid $color-html-badge;       
        transform: scaleY(.99);
      }
    }
    
    ._css &-path {
      border-top-color: $color-css-badge;
      &:after {
        border-top-color: $color-css-badge;
      }
    }
    
    ._js &-path {
      border-top-color: $color-js-badge;
      &:after {
        border-top-color: $color-js-badge;
      }
    }
  }
  
  &__semitransparent {
    position: absolute;
    z-index: 10;
    top: -280px;
    left: 123px;
    width: 122px;
    height: 285px;
    overflow: hidden;

    &-path {
      position: absolute;
      left: -122px;
      top: 0;
      width: 207px;
      height: 0;
      border: 16px solid transparent;
      border-top: 255px solid $color-white-transparent;  
      &:after {
        width: 1px;
        height: 0;
        border: 103px solid transparent;
        border-top: 30px solid $color-white-transparent;
      }
    }
  }
}