CodePen Embed - Pseudo Element Banner

<div class="multi-level-ribbon">
  <div class="level first">
    <div>Oh my goodness</div>
  </div>
  <div class="level second">
    <div>oh my damn</div>
  </div>
  <div class="level third">
    <div>oh my goodness</div>
  </div>
  <div class="level last">
    <div>oh my damn</div>
  </div>
</div>

@import compass

$bg: #345
$fg-ribbon: #a01
$bg-ribbon: saturate(darken($fg-ribbon, 13), 20)
$text-color: #fff

@mixin block-pseudo-element()
  content: ' '
  display: block
  position: absolute

@mixin border-pseudo-element($element-bg: null)
  @if ($element-bg == null)
    $element-bg : $bg-ribbon
  @include block-pseudo-element
  width: 0
  height: 0
  border: 20px solid $element-bg

@mixin bg-block-pseudo-element($element-bg: null)
  @if $element-bg == null
    $element-bg: $bg-ribbon
  @include block-pseudo-element
  width: 20px
  height: 20px
  background: $element-bg
    
body
  @include background-image(linear-gradient($bg, darken($bg, 13)))
  background-repeat: no-repeat
  background-color: darken($bg, 13)
  min-height: 400px
  font-family: 'Titillium Web'

.multi-level-ribbon
  width: 340px
  margin: 0 auto
  padding: 15px 0 0
  font-size: 20px
  line-height: 40px
  font-weight: bold
  color: $text-color
  text-shadow: 1px 1px 1px #000
  font: Helvetica, Arial, sans-serif
  
  .level
    margin: 5px 0 20px
    position: relative
    
    &.first
      width: 170px
      position: relative
      left: -10px
      &:before
        @include border-pseudo-element()
        top: -40px
        left: -20px
        border-top-width: 20px
      &:after
        right: -40px
        background: $bg-ribbon
      div
        background: $fg-ribbon
        padding: 0 0 0 5px
        &:before
          @include border-pseudo-element($fg-ribbon)
          top: 0
          left: -20px
          z-index: 100
          border-left-width: 10px
          border-right-width: 10px
          border-left-color: transparent
          border-bottom-color: transparent
        &:after
          @include border-pseudo-element($fg-ribbon)
          top: 0
          right: -40px
          z-index: 100        
          border-right-color: transparent
          border-top-color: transparent
    &.second
      $fg-ribbon: saturate(darken($fg-ribbon, 4), 20)
      $bg-ribbon: saturate(darken($bg-ribbon, 4), 20)
      $text-color: darken($text-color, 3)
      width: 145px
      margin-left: 148px
      color: $text-color
      &:before
        @include border-pseudo-element($fg-ribbon)
        top: 0
        right: -26px
        z-index: 100
        border-right-width: 13px
        border-left-width: 13px
        border-right-color: transparent
        border-top-color: transparent
      &:after
        height: 85px
        right: -26px
        background: $bg-ribbon
      div
        padding: 0 0 0 8px
        background: $fg-ribbon
        &:before
          @include border-pseudo-element($fg-ribbon)
          top: 0
          left: -26px
          border-right-width: 13px
          border-left-width: 13px
          border-left-color: transparent
          border-bottom-color: transparent
          z-index: 100
      
    &.third
      $fg-ribbon: saturate(darken($fg-ribbon, 4), 40)
      $bg-ribbon: saturate(darken($bg-ribbon, 4), 40)
      width: 230px
      margin-left: 14px
      color: $text-color
      $text-color: darken($text-color, 3)
      &:before
        @include border-pseudo-element($fg-ribbon)
        top: 0
        right: -16px
        z-index: 100
        border-right-width: 8px
        border-left-width: 8px
        border-right-color: transparent
        border-top-color: transparent
      &:after
        background: $bg-ribbon
        -webkit-transform: rotate(-45deg)
        transform: rotate(-45deg)
        -webkit-transform-origin: 0 0
        transform-origin: 0 0
        left: -16px
        height: 70px
      div
        background: $fg-ribbon
        &:before
          @include border-pseudo-element($fg-ribbon)
          top: 0
          left: -16px
          border-right-width: 8px
          border-left-width: 8px
          border-left-color: transparent
          border-top-color: transparent
          z-index: 100
    &.last
      $fg-ribbon: saturate(darken($fg-ribbon, 4), 80)
      $bg-ribbon: saturate(darken($bg-ribbon, 2), 80)
      $text-color: darken($text-color, 3)
      width: 150px
      margin-left: 55px
      color: $text-color
      &:before
        @include border-pseudo-element($fg-ribbon)
        top: 0
        right: -16px
        border-right-width: 8px
        border-left-width: 8px
        border-right-color: transparent
        border-top-color: transparent
        z-index: 100
      &:after
        @include border-pseudo-element()
        -webkit-transform: rotate(0deg)
        transform: rotate(0deg)
        -webkit-transform-origin: 0 0
        transform-origin: 0 0
        top: 40px
        right: -16px
        border-top-width: 60px
        border-bottom-color: transparent
        background: none
      div
        padding: 0
        background: $fg-ribbon
      div:before
        @include border-pseudo-element($fg-ribbon)
        top: 0
        left: -40px
        border-right-width: 20px
        border-left-width: 20px
        border-left-color: transparent
        border-bottom-color: transparent
        z-index: 100
    div
      background: $fg-ribbon
      padding: 0 15px
      position: relative
      z-index: 10
      
    &:after
      @include bg-block-pseudo-element()
      top: 40px
      right: 0
      height: 70px
      width: 40px
      -webkit-transform: rotate(45deg)
      transform: rotate(45deg)
      -webkit-transform-origin: 100% 0
      transform-origin: 0 0
      
@font-face 
  font-family: 'Titillium Web'
  font-style: normal
  font-weight: 200
  src: local('Titillium WebThin'), local('TitilliumWeb-Thin'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wpr-E6O57bqL2WtN4biLacgeg.woff) format('woff')

@font-face 
  font-family: 'Titillium Web'
  font-style: normal
  font-weight: 300
  src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wpr2-jEQ7ixT9mykCZ8BBatAk.woff) format('woff')

@font-face 
  font-family: 'Titillium Web'
  font-style: normal
  font-weight: 400
  src: local('Titillium Web'), local('TitilliumWeb-Regular'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/7XUFZ5tgS-tD6QamInJTcdASgiSiazNVaMZaV9DKExs.woff) format('woff')

@font-face 
  font-family: 'Titillium Web'
  font-style: normal
  font-weight: 600
  src: local('Titillium WebSemiBold'), local('TitilliumWeb-SemiBold'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wpr2gCgcskKIFo40ndTrcdCiA.woff) format('woff')

@font-face 
  font-family: 'Titillium Web'
  font-style: normal
  font-weight: 700
  src: local('Titillium WebBold'), local('TitilliumWeb-Bold'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wpr_fb5Q4ZioEX5fLPE_o-1oM.woff) format('woff')

@font-face 
  font-family: 'Titillium Web'
  font-style: normal
  font-weight: 900
  src: local('Titillium WebBlack'), local('TitilliumWeb-Black'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wpr1D_gR9ziCIb2bLb6UF6jDM.woff) format('woff')

@font-face 
  font-family: 'Titillium Web'
  font-style: italic
  font-weight: 200
  src: local('Titillium WebThin Italic'), local('TitilliumWeb-ThinItalic'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/RZunN20OBmkvrU7sA4GPPlDg4TuxMtsZ0wbII6ymf28.woff) format('woff')

@font-face 
  font-family: 'Titillium Web'
  font-style: italic
  font-weight: 300
  src: local('Titillium WebLight Italic'), local('TitilliumWeb-LightItalic'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/RZunN20OBmkvrU7sA4GPPnIu3i5KhThI9r_JXVTVbEo.woff) format('woff')

@font-face 
  font-family: 'Titillium Web'
  font-style: italic
  font-weight: 400
  src: local('Titillium WebItalic'), local('TitilliumWeb-Italic'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/r9OmwyQxrgzUAhaLET_KOx8qa_L3FxsPN3YZsknOt2E.woff) format('woff')

@font-face 
  font-family: 'Titillium Web'
  font-style: italic
  font-weight: 600
  src: local('Titillium WebSemiBold Italic'), local('TitilliumWeb-SemiBoldItalic'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/RZunN20OBmkvrU7sA4GPPgBjfk66F-VJc8CAlorrYAk.woff) format('woff')

@font-face 
  font-family: 'Titillium Web'
  font-style: italic
  font-weight: 700
  src: local('Titillium WebBold Italic'), local('TitilliumWeb-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/RZunN20OBmkvrU7sA4GPPhR2GJzKq3w6YIk4L0L9zPA.woff) format('woff')

View Compiled

This Pen is owned by wesruv on CodePen.

See more by @wesruv on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.