One element CSS ribbon

CSS: One element CSS ribbon

/*=============================================
=One element CSS ribbon (Need browser prefixes!!!!) =
=============================================*/

/**
*
* <!-- Lets make a cool single element ribbon -->
<h1>Single Element - Pure CSS3 </h1>
http://thecodeplayer.com/walkthrough/single-element-pure-css3-double-fold-ribbon
*
**/

h1 {
    display: inline-block;
    position: relative;
    margin: 120px 0;
    padding: 14px 30px;
    text-shadow: 0 0 1px #758890;
    text-transform: uppercase;
    font-family: arial,verdana;
    font-size: 14px;
    line-height: 28px;
    outline: none;
    color: #8699A0;
    /*Finally another shadow to negate some aspects of the :after element to complete the effect. This drops a shrinked shadow over the :after element with the same color like that of the background. The shadow is shrinked by the same offset amount = 18. And it is moved down by twice the offset amount to cover the entire height of the :after element*/

 box-shadow: 0 0 30px 0 rgba(0,0,0,0.1) ,0 36px 0 -18px #B1E3E2;
}

/*The ribbon ends*/

h1:before {
    content: '';
    z-index: -1;
    position: absolute;
    top: 18px;
    left: -15%;
    width: 130%;
    height: 0;
    border: 28px solid rgba(0,0,0,0);
    border-right: 28px solid #B1E3E2;
    border-left: 28px solid #B1E3E2;
}

/*The after pseudo element will negatve the bottom part of the ribbon completing the effect*/

h1:after {
    content: '';
    z-index: -1;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 0;
    border-top: 18px solid #99acb2;
    border-right: 18px solid transparent;
    border-left: 18px solid transparent;
}

h1,
h1:before {
    background-image: /*2 grey borders*/

 linear-gradient(transparent 8%,rgba(0,0,0,0.1) 8%,rgba(0,0,0,0.1) 14%,transparent 14%,transparent 86%,rgba(0,0,0,0.1) 86%,rgba(0,0,0,0.1) 92%,transparent 92%),/*white gloss gradient*/

 linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0) ),/*thin stripes*/

 linear-gradient(45deg,transparent 40%,rgba(0,0,0,0.1) 40%,rgba(0,0,0,0.1) 60%,transparent 60%),/*white base*/

 linear-gradient(white,white);
    background-size: cover,/*borders*/

 cover,/*white gloss*/

 4px 4px,/*thin stripes*/

 cover;
}

h1,
h1:before,
h1:after {
    box-sizing: border-box;
    background-origin: border-box;
}

/*-----  End of One element CSS ribon  ------*/