Navigation Ribbon

by ChrisDot

HTML

<h1 class="ribbon">
   <strong class="ribbon-content">Your navigation button!</strong>
</h1>

CSS

.ribbon {
 font-size: 16px;
 width: 25%;
 position: relative;
 background: darkred;
 color: #fff;
 font: 13px Trebuchet MS;
 text-align: center;
 padding: 1em 2em;
 margin: 2em auto 3em;
}

.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
 content: "";
 position: absolute;
 display: block;
 border-style: solid;
 border-color: darkred transparent transparent;
 bottom: -1em;
}

.ribbon .ribbon-content:before {
 left: 0;
 border-width: 1em 0 0 1em;
}

.ribbon .ribbon-content:after {
 right: 0;
 border-width: 1em 1em 0 0;
}