body {
height: 100%;
margin: 0;
background: #ccc;
}
.ribbon {
display: inline-block;
font-size: 14px;
line-height: 28px;
color: #8699A0;
text-shadow: 0 0 1px #758890;
margin: 20px 70px;
font-family: arial,verdana;
outline: none;
padding: 14px 30px;
position: relative;
text-transform: uppercase;
box-shadow: 0 0 30px 0 rgba(0,0,0,0.1),0 36px 0 -18px #ccc;
}
.ribbon:before {
content: '';
position: absolute;
top: 18px;
left: -15%;
z-index: -1;
width: 130%;
height: 0;
border: 28px solid rgba(0,0,0,0);
border-left: 28px solid #ccc;
border-right: 28px solid #ccc;
}
.ribbon:after {
content: '';
width: 100%;
height: 0;
position: absolute;
top: 100%;
left: 0;
z-index: -1;
/*The height of the top border is same as width of the left/right borders for the smoothest effect. The height of the top border is also the same as the offset the :before element has from the top*/
border-top: 18px solid #999;
border-left: 18px solid transparent;
border-right: 18px solid transparent;
}
.ribbon,.ribbon:before {
background-image: 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%),linear-gradient(rgba(255,255,255,0.75),rgba(255,255,255,0)),linear-gradient(45deg,transparent 40%,rgba(0,0,0,0.1) 40%,rgba(0,0,0,0.1) 60%,transparent 60%),linear-gradient(white,white);
background-size: cover,cover,4px 4px,cover;
}
.ribbon,.ribbon:before,.ribbon:after {
box-sizing: border-box;
background-origin: border-box;
}
