Corner Ribbon

Make a corner ribbon effect using only CSS

by gkohen

HTML

<div class="pivotLayerElement">
    <div class="wrapper image-type">
      <div class="ribbon-wrapper-blue">
        <div class="ribbon-blue">NEWS</div>
      </div>
      <h1>Hot off the press</h1>
        <p>Another one of of Chris Coyiers lovely <a href="http://css-tricks.com" target="_blank">CSS Tricks</a>.</p>
    </div>
</div>

CSS

body {
  background:url('http://dl.dropbox.com/u/1621719/demo/JSFiddle/whitey.png');
  font-family:arial;
}
.wrapper {
  margin: 50px auto;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.5);
  background: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(229,229,229,0.5) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(229,229,229,0.5)));
  background: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(229,229,229,0.5) 100%);
  background: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(229,229,229,0.5) 100%);
  background: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(229,229,229,0.5) 100%);
  background: linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(229,229,229,0.5) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.6);
  -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.6);
  box-shadow:         0px 0px 8px rgba(0,0,0,0.6);
  position: relative;
  z-index: 90;
}

h1 {font-size:1.4em;padding:30px 0 0 20px;border-bottom:1px solid #eee;}
.wrapper p {padding:10px 0 0 20px;font-size:0.85em;color:#aaa;}

.pivotLayerElement .image-type .ribbon-wrapper-blue {
  width: 60px;
  height: 60px;
  overflow: hidden;
  position: absolute;
  bottom: -3px;
  right: -3px;

}

.pivotLayerElement .image-type .ribbon-blue {  
  font: bold 11px Sans-Serif;
  color: #fff;
  text-align: center;
  letter-spacing:1px;
  text-shadow:1px -1px 3px rgba(0,0,0,0.5) ;
  -webkit-transform: rotate(315deg);
  -moz-transform:    rotate(315deg);
  -ms-transform:     rotate(315deg);
  -o-transform:      rotate(315deg);
  position: relative;
  padding: 3px 0;
  right: 35px;
  top: 30px;
  width: 150px;
  background: rgba(167,207,223,05);
  background: -moz-linear-gradient(top, rgba(167,207,223,0.5) 0%, rgba(35,83,138,0.5) 100%);
 ...