JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<div id="banner"><p id="title">Gene Locklin</p></div>

CSS

body { width: 90%; margin: 0 auto; font-family: sans-serif; color: #fff; padding: 0 48px }
#banner {
    position:relative;
    background:red;
    width:100%;
    margin-top: 48px;
}

#banner:before {
    content:" ";
    position:absolute;
    display:block;
    width:0px;
    height:0px;
    top:10px;
    left:-30px;
    border-color:red red red transparent;
    border-style:solid;
    border-width:25px;
}

#banner:after {
    content:"";
    position:absolute;
    display:block;
    border-color:#CC1100 #CC1100 transparent transparent;
    border-style:solid;
    border-width:5px 10px 5px 10px;
    top:100%;
    left:0px;
}

#title {
    text-align:center;
    line-height:50px;
}

#title:before {
    content:" ";
    position:absolute;
    display:block;
    width:0px;
    height:0px;
    top:10px;
    right:-30px;
    border-color:red transparent red red;
    border-style:solid;
    border-width:25px;
}

#title:after {
    content:"";
    position:absolute;
    display:block;
    border-color:#CC1100 transparent transparent #CC1100;
    border-style:solid;
    border-width:5px 10px 5px 10px;
    top:50px;
    right:0px;
}