Demo pure css ribbon
body {
background: #a6a6a6;
color: #111;
font-size: 100%;
padding: 150px 50px;
}
.ribbon-start, .ribbon, .ribbon-end {
background-color: #e02c2c;
background-image: -webkit-gradient(linear, 100% 0%, 0% 100%,
from(transparent), color-stop(0.25, transparent),
color-stop(0.25, hsla(0,0%,0%,.15)), color-stop(0.50, hsla(0,0%,0%,.15)),
color-stop(0.50, transparent), color-stop(0.75, transparent),
color-stop(0.75, hsla(0,0%,0%,.15)), to(hsla(0,0%,0%,.15)));
background-image: -webkit-linear-gradient(right top,
transparent 0%, transparent 25%,
hsla(0,0%,0%,.15) 25%, hsla(0,0%,0%,.15) 50%,
transparent 50%, transparent 75%,
hsla(0,0%,0%,.15) 75%, hsla(0,0%,0%,.15) 100%);
background-image:
-moz-linear-gradient(left bottom,
transparent 0%, transparent 25%,
hsla(0,0%,0%,.15) 25%, hsla(0,0%,0%,.15) 50%,
transparent 50%, transparent 75%,
hsla(0,0%,0%,.15) 75%, hsla(0,0%,0%,.15) 100%);
background-image:
-ms-linear-gradient(right bottom,
transparent 0%, transparent 25%,
hsla(0,0%,0%,.15) 25%, hsla(0,0%,0%,.15) 50%,
transparent 50%, transparent 75%,
hsla(0,0%,0%,.15) 75%, hsla(0,0%,0%,.15) 100%);
background-image:
-o-linear-gradient(right bottom,
transparent 0%, transparent 25%,
hsla(0,0%,0%,.15) 25%, hsla(0,0%,0%,.15) 50%,
transparent 50%, transparent 75%,
hsla(0,0%,0%,.15) 75%, hsla(0,0%,0%,.15) 100%);
background-image:
linear-gradient(right bottom,
transparent 0%, transparent 25%,
hsla(0,0%,0%,.15) 25%, hsla(0,0%,0%,.15) 50%,
transparent 50%, transparent 75%,
hsla(0,0%,0%,.15) 75%, hsla(0,0%,0%,.15) 100%);
-webkit-background-size: 3px 3px;
-moz-background-size: 3px 3px;
-ms-background-size: 3px 3px;
-o-background-size: 3px 3px;
background-size: 3px 3px;
}
.ribbon-start, .ribbon, .ribbon-end {
height: 50px;
float: left;
position: relative;
width: 75px;
}
.ribbon-start, .ribbon-end {
overflow: hidden;
}
.ribbon-start {
-webkit-box-shadow: inset 0 -25px 25px hsla(0,0%,0%,.2),
inset 0 0 0 2px hsla(0,0%,100%,.25),
inset 0 0 0 1px hsla(0,0%,0%,.75),
17px 1px 2px hsla(0,0%,0%,.4);
-moz-box-shadow: inset 0 -25px 25px hsla(0,0%,0%,.2),
inset 0 0 0 2px hsla(0,0%,100%,.25),
inset 0 0 0 1px hsla(0,0%,0%,.75),
17px 1px 2px hsla(0,0%,0%,.4);
box-shadow: inset 0 -25px 25px hsla(0,0%,0%,.2),
inset 0 0 0 2px hsla(0,0%,100%,.25),
inset 0 0 0 1px hsla(0,0%,0%,.75),
17px 1px 2px hsla(0,0%,0%,.25);
}
.ribbon-end {
-webkit-box-shadow: inset 0 -25px 25px hsla(0,0%,0%,.2),
inset 0 0 0 2px hsla(0,0%,100%,.25),
inset 0 0 0 1px hsla(0,0%,0%,.75),
-17px 1px 2px hsla(0,0%,0%,.4);
-moz-box-shadow: inset 0 -25px 25px hsla(0,0%,0%,.2),
inset 0 0 0 2px hsla(0,0%,100%,.25),
inset 0 0 0 1px hsla(0,0%,0%,.75),
-17px 1px 2px hsla(0,0%,0%,.4);
box-shadow: inset 0 -25px 25px hsla(0,0%,0%,.2),
inset 0 0 0 2px hsla(0,0%,100%,.25),
inset 0 0 0 1px hsla(0,0%,0%,.75),
-17px 1px 2px hsla(0,0%,0%,.25);
}
.ribbon {
margin: 0 -20px;
top: -10px;
width: 400px;
z-index: 10;
-webkit-box-shadow: inset 0 -25px 25px hsla(0,0%,0%,.2),
inset 0 0 0 2px hsla(0,0%,100%,.25),
inset 0 0 0 1px hsla(0,0%,0%,.75),
0 2px 5px hsla(0,0%,0%,.4);
-moz-box-shadow: inset 0 -25px 25px hsla(0,0%,0%,.2),
inset 0 0 0 2px hsla(0,0%,100%,.25),
inset 0 0 0 1px hsla(0,0%,0%,.75),
0 2px 5px hsla(0,0%,0%,.4);
box-shadow: inset 0 -25px 25px hsla(0,0%,0%,.2),
inset 0 0 0 2px hsla(0,0%,100%,.25),
inset 0 0 0 1px hsla(0,0%,0%,.75),
0 2px 5px hsla(0,0%,0%,.25);
}
.ribbon:after, .ribbon:before {
border-top: 5px solid hsla(0,0%,0%,.5);
bottom: -5px;
content: '';
height: 0;
position: absolute;
width: 0;
}
.ribbon:after {
border-left: 10px solid transparent;
left: 0;
}
.ribbon:before {
border-right: 10px solid transparent;
right: 0;
}
.ribbon-start:after, .ribbon-start:before, .ribbon-end:after, .ribbon-end:before {
content: '';
height: 50px;
position: absolute;
top: 0;
width: 50px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.ribbon-start:after, .ribbon-end:after {
background: #a6a6a6;
}
.ribbon-start:after {
left: -20px;
}
.ribbon-end:after {
right: -20px;
}
.ribbon-start:before, .ribbon-end:before {
background: hsla(0,0%,0%,.5);
}
.ribbon-start:before {
left: -19px;
}
.ribbon-end:before {
right: -19px;
}
.ribbon ul, .ribbon li {
list-style: none;
margin: 0;
padding: 0;
}
.ribbon a {
color: #f6f6f6;
display: block;
float: left;
font: 1em/48px georgia, serif;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 1px hsla(0,0%,0%,.25);
width: 100px;
}
.ribbon a:hover, .ribbon a:focus {
text-shadow: 0 1px 1px hsla(0,0%,0%,.25),
0 0 5px hsla(0,0%,100%,.5);
}
.ribbon a:active {
position: relative;
top: 1px;
}
.content {
background: #f6f6f6;
margin: -50px 65px;
padding: 100px 20px 20px;
position: relative;
width: 340px;
z-index: 5;
-webkit-box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.5),
inset 0 0 50px hsla(0,0%,0%,.2),
0 2px 5px hsla(0,0%,0%,.25);
-moz-box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.5),
inset 0 0 50px hsla(0,0%,0%,.2),
0 2px 5px hsla(0,0%,0%,.25);
box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.5),
inset 0 0 50px hsla(0,0%,0%,.2),
0 2px 5px hsla(0,0%,0%,.25);
}
