Pure CSS Banner from http://jsfiddle.net/DNRa8/16/
.featured{
margin: 40px auto 30px auto;
width: 200px;
height: 180px;
background: white;
box-shadow: -1px -1px 10px #DDD;
}
/* This bit does the rhombus that sits in the top left hand corner */
.featured:before{
content: "";
display: block;
position: relative;
width:0px;
height: 0px;
top: 5px;
left: -40px;
width: 80px;
height: 20px;
box-shadow: 0 2px 0 #DDD;
text-align: center;
-webkit-transform: rotateZ(-45deg);
-moz-transform: rotateZ(-45deg);
/* Rhombus */
border-width: 0 30px 30px 30px;
border-style: solid;
border-color: transparent transparent #3AE transparent;
}
/* This does the text "featured" and the gradient that makes it look curved */
.featured:after{
display: block;
position: relative;
content: "featured";
color: green;
top: -29px;
left: -33px;
width: 140px;
height: 28px;
padding-top: 5px;
background: transparent;
background-image:
-webkit-linear-gradient(45deg,
transparent 0%,
transparent 77%,
rgba(255,255,255,0.3) 80%,
rgba(255,255,255,0.3) 81%,
rgba(0,0,0,0.4) 82%,
transparent 83%
),
-webkit-linear-gradient(-45deg,
transparent 0%,
transparent 17%,
rgba(0,0,0,0.5) 18%,
rgba(255,255,255,0.3) 19%,
rgba(255,255,255,0.3) 20%,
transparent 23%
);
background-image:
-moz-linear-gradient(45deg,
transparent 0%,
transparent 77%,
rgba(255,255,255,0.3) 80%,
rgba(255,255,255,0.3) 81%,
rgba(0,0,0,0.4) 82%,
transparent 83%
),
-moz-linear-gradient(-45deg,
transparent 0%,
transparent 17%,
rgba(0,0,0,0.5) 18%,
rgba(255,255,255,0.3) 19%,
rgba(255,255,255,0.3) 20%,
transparent 23%
);
-webkit-transform: rotateZ(-45deg);
-moz-transform: rotateZ(-45deg);
color: rgba(0,0,0,0.5);
font-weight: bold;
font-family: georgia, 'Times New Roman', Times, serif;
text-align: center;
text-shadow: 0 1px rgba(255,255,25,0.1);
}
body{
background:
-webkit-radial-gradient(rgba(0,0,0,0.05) 15%, transparent 16%) 0 0,
-webkit-radial-gradient(rgba(0,0,0,0.05) 15%, transparent 16%) 8px 8px,
-webkit-radial-gradient(rgba(0,0,0,.05) 15%, transparent 20%) 0 1px,
-webkit-radial-gradient(rgba(0,0,0,.05) 15%, transparent 20%) 8px 9px;
background:
-moz-radial-gradient(rgba(0,0,0,0.05) 15%, transparent 16%) 0 0,
-moz-radial-gradient(rgba(0,0,0,0.05) 15%, transparent 16%) 8px 8px,
-moz-radial-gradient(rgba(0,0,0,.05) 15%, transparent 20%) 0 1px,
-moz-radial-gradient(rgba(0,0,0,.05) 15%, transparent 20%) 8px 9px;
background-color:#FAFAFA;
background-size:16px 16px;
}