<div class="ribbon">
   <p class="ribbon-content" style="width: 500px;">Back in the Field</p>
@import url(https://fonts.googleapis.com/css?family=Oswald&subset=latin,latin-ext);

body {
  background: #000000;

.ribbon {
 width: 100%;   
 position: relative;
 background: #f9ff00;
 padding: 1em 2em; /* Adjust to suit */
 margin: 2em auto 3em -2em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
 -webkit-transform: rotate(-6deg);
 -moz-transform:    rotate(-6deg);
 -ms-transform:     rotate(-6deg);
 -o-transform:      rotate(-6deg);
 transform:         rotate(-6deg);
 -webkit-backface-visibility: hidden;


.ribbon-content {
  font-size: 52pt !important;
  font-family: 'Oswald', Helvetica, Helvetica Neue, Arial, Sans-Serif;
  text-transform: uppercase;
  color: #000;
  text-align: left;

.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
 content: "";
 position: absolute;
 display: inline-block;
 border-style: solid;
 border-color: #b19105;
 bottom: -1.75em;
 z-index: -1;
 width: 100%;
.ribbon .ribbon-content:before {
 left: 25%;
 border-width: 1em;
 width: 100%;
 content: "the brooklyn nine-nine podcast";
 color: #000;
 font-size: 26pt; 
 background-color: #b19105;
 font-family: 'Oswald', Helvetica, Helvetica Neue, Arial, sans-serif;
 text-align: left;
 display: block;
.ribbon .ribbon-content:after {
 right: 0;
 border-width: 0;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.