Some text

More text

Even more text

Ribbon

Some text

More text

Even more text

Ribbon

Some text

More text

Even more text

Ribbon

Generate Raw CSS

An ancestor element must contain overflow:hidden; and a non-static position. I.e. .ribbon-wrap{overflow:hidden;position:relative;}

px
px
deg
.ribbon{
  position:absolute;
  padding:0;
  margin:0;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  transform-origin:0 100%;
  box-shadow:0 1px 6px 0 rgba(0,0,0,.12),0 1px 6px 0 rgba(0,0,0,.12);
  background-color:#ffeb3b;
  color:rgba(0,0,0,0.9);
  height:30px;
  width:200px;
  top:-30px;
  transform:rotateZ(45deg);
  padding-left:30px;
  padding-right:30px;
  line-height:30px;
  right:-58.57864376269px;
  -webkit-transform:rotateZ(45deg);
  -moz-transform:rotateZ(45deg);
  -o-transform:rotateZ(45deg);
}

LESS Mixin

.ribbon(@height:30px;@width:200px;@rotate:45deg){
  height:@height;
  width:@width;
  transform:rotateZ(@rotate);
  transform-origin:0 100%;
  position:absolute;
  top:-@height;
  right:floor(cos(@rotate)*@width)-@width;
  padding:0 ceil(@height*tan(@rotate)) 0 ceil(@height/tan(@rotate));
  margin:0;
  line-height:@height;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  box-shadow:0 1px 6px 0 rgba(0,0,0,.12),0 1px 6px 0 rgba(0,0,0,.12);
  background-color:#ffeb3b;
  color:rgba(0,0,0,0.9);
}

PHP (used for this page)

function ribbon_style($height=200,$width=30,$rotate=45,$align='right',$styles=array()){
  static $defaults=array(
    'position'=>'absolute',
    'padding'=>'0',
    'margin'=>'0',
    'text-align'=>'center',
    'white-space'=>'nowrap',
    'overflow'=>'hidden',
    'transform-origin'=>'0 100%',
    'box-shadow'=>'0 1px 6px 0 rgba(0,0,0,.12),0 1px 6px 0 rgba(0,0,0,.12)',
    'background-color'=>'#ffeb3b',
    'color'=>'rgba(0,0,0,0.9)',
  );
  static $prefixes=array('webkit','moz','o'); // only 'webkit' is actually needed at this point
  
  $calculated=array(
    'height'=>$height.'px',
    'width'=>$width.'px',
    'top'=>-$height.'px',
    'transform'=>'rotateZ('.intval($rotate).'deg)',
    'padding-left'=>$height/tan(deg2rad($rotate)).'px',
    'padding-right'=>$height*tan(deg2rad($rotate)).'px',
    'line-height'=>$height.'px'
  );
  if($align==='right')
    $calculated['right']=cos(deg2rad($rotate))*$width-$width.'px';
  else
    $calculated['left']=cos(deg2rad($rotate))*$width-$width.'px';
  
  $styles=array_merge($defaults,$calculated,$styles);
  
  // browser prefixes
  foreach($prefixes as $prefix)
    $styles['-'.$prefix.'-transform']=$styles['transform'];
  
  $return='';
  foreach($styles as $k=>$v)
    $return.="$k:$v;";
  return $return;
}