<iframe src="http://awwwards.com/"></iframe>
<div class="award">
  <div class="ribbon top">
    <span><strong>This</strong> site</span>
  </div>
  <div class="ribbon bottom">
    <span>is <strong>okay</strong></span>
  </div>
</div>
<!--<div class="award">
  <div class="ribbon top">
    <span><strong>Site</strong> of</span>
  </div>
  <div class="ribbon bottom">
    <span>the <strong>Day</strong></span>
  </div>
</div>-->
<!--<div class="award">
  <div class="ribbon top">
    <span><strong>Never</strong> won</span>
  </div>
  <div class="ribbon bottom">
    <span><strong>Anything</strong></span>
  </div>
</div>-->
<!--<div class="award">
  <div class="ribbon top">
    <span>Your <strong>Mum</strong></span>
  </div>
  <div class="ribbon bottom">
    <span><strong>Loves</strong> this</span>
  </div>
</div>-->
@import "bourbon";

$ribbon-color: #333333;
$skew-amount: 20;

@include keyframes(grow) {
  from {
    width: 0;
    padding: 6px 0;
    color: transparent;
  }
}

body {
  font-family: "Helvetica", "Arial", sans-serif;
  margin: 0;
}

iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  border: none;
  background-image: url(http://nickspiel.me/uploads/codepen-assets/awwwards-screenshot.png);
  background-size: cover;
}

.award {
  position: absolute;
  z-index: 1;
  height: 125px;
  top: 70px;
  .ribbon {
    position: relative;
    width: 75px;
    padding: 6px 12px;
    background-color: $ribbon-color;
    color: rgba(white, 0.8);
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 5px 0 5px 0;
    box-shadow: 0 2px 5px 0 rgba(black, 0.25);
    @include animation(grow 1s both $ease-in-out-back);
    span {
      display: block;
      strong {
        color: white;
        text-transform: uppercase;
      }
    }
    &.top {
      z-index: 1;
      transform: skewY(#{$skew-amount}deg);
      border-radius: 0 5px 0 5px;
      span {
        transform: skewY(-#{$skew-amount}deg) rotateZ(#{$skew-amount}deg);
      }
    }
    &.bottom {
      transform: skewY(-#{$skew-amount}deg) translateY(15px);
      background: linear-gradient(45deg, $ribbon-color, darken($ribbon-color, 10));
      span {
        transform: skewY(#{$skew-amount}deg) rotateZ(-#{$skew-amount}deg);
      }
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.