<div class="ribbon">
<p class="ribbon-content" style="width: 500px;">Back in the Field</p>
</div>
@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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.