Responsive Ribbon Banner (CSS Only)!

by Steve

HTML

<!-- ======= -->
<!-- WRAPPER -->
<div id="bannerContainer">
    <!-- ................ -->
    <!-- left banner tail -->
    <div class="left-shadow"></div>
    <div class="left-top"></div>
    <div class="left-bottom"></div>
    <!-- ....... -->
    <!-- content -->
    <div class="contentBody">
        <h1>Hello!</h1>
    </div>
    <!-- ................. -->
    <!-- right banner tail -->
    <div class="right-shadow"></div>
    <div class="right-top"></div>
    <div class="right-bottom"></div>
</div>

CSS

/*********************************************
*  WRAPPER
**********************************************/
#bannerContainer {
    position: relative;
    margin: 0 auto;
    width: 70%;
    height: 4em;
}
/*********************************************
*  MAIN CONTENT BODY
**********************************************/
.contentBody {
    background: #4FA798;
    height: 4em;
    position: relative;
    border: 0.1em dashed #1F6256;
    -webkit-border-radius: 0.25em;
    -moz-border-radius: 0.25em;
    border-radius: 0.25em;
    z-index: 1;
    margin: 3em 0;
}
.contentBody h1 {
    line-height: 2em;
    margin: 0;
    text-align: center;
}
/*********************************************
*  BANNER TAILS - SHADOW
**********************************************/
.left-shadow,
.right-shadow {
    height: 3.8em;
    width: 2.8em;
    position: absolute;
    top: 0.15em;
    z-index: 2;
}
.left-shadow {
    left: -2.8em;
    -webkit-box-shadow: inset -0.75em 0 0.15em 0 rgba(31,98,86,1);
    -moz-box-shadow: inset -0.75em 0 0.15em 0 rgba(31,98,86,1);
    box-shadow: inset -0.75em 0 0.15em 0 rgba(31,98,86,1);
}
.right-shadow {
    right: -2.8em;
    -webkit-box-shadow: inset 0.75em 0 0.15em 0 rgba(31,98,86,1);
    -moz-box-shadow: inset 0.75em 0 0.15em 0 rgba(31,98,86,1);
    box-shadow: inset 0.75em 0 0.15em 0 rgba(31,98,86,1);
}
/*********************************************
*  BANNER TAILS - POSITION/SHAPE/COLOR
**********************************************/
.left-top,
.left-bottom,
.right-top,
.right-bottom {
    position: absolute;
    border-style: solid;
    border-width: 3.15em;
    height: 0;
    width: 0;
    border-color: red;
}
.left-top,
.right-top {
    border-color: #429284 transparent transparent;
}
.left-bottom,
.right-bottom {
    border-color: transparent transparent #429284;
}
.left-top,
.right-top {

}
.left-bottom,
.right-bottom {
    top: -2.3em;
}
.left-top,
.left-bottom {
    left: -3em;
}
.right-top,
.right-bottom {
    right: -3em;
}