<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'><!-- STYLUS wasn't liking my ligher font-size? -->

<div class="banner">
    <span>minimalist flat ribbon</span>
</div><!--end banner-->

<span>--intentional cut-off text--</span>
/* VARIABLES */
$color = #4FC1E9
$font = 'Open Sans', sans-serif

/* CUSTOM MIXINS */
absolutePos(topPos, rightPos)
  content ""
  position absolute
  top topPos
  right rightPos

font()
  font-family $font
  font-weight lighter
  font-size 25px
  color #fff
  
size(h, w)
  height h
  width w

skewed(deg)
  -ms-transform skewY(deg)
  -webkit-transform skewY(deg)
  transform skewY(deg)

/* BANNER STYLES */
.banner
  position relative
  size 60px, 310px
  margin 100px auto
  background $color + 20
  font()
  &::before
    absolutePos -16px, 0
    size 60px, 90px
    skewed 20deg
    background $color - 5
  &::after
    absolutePos -32px, 20px
    size 60px, 70px
    background $color + 30
  span
    display block
    padding-top 10px
    &::before
      absolutePos 50px, 180px
      size 60px, 170px
      background $color - 14
      z-index -9
    &::after
      absolutePos 60px, 180px
      border-top 0px solid transparent
      border-bottom 50px solid transparent
      border-right 130px solid $color - 5
      
body
  font-family $font
  text-align center
  color #ddd
View Compiled 
/* NO JS SILLY */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.