CSS3 Ribbon

by tlgreg

HTML

<div class="box">
    <h1 class="ribbon">Some text...</h1>
</div>

CSS

body { cursor: default; }

.box {
    position: relative;
    z-index: 1;
    width: 200px;
    height: 200px;
    margin: 50px auto 0;
    background: #eee;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 1px 2px rgba( 0, 0, 0, .5 );
    -webkit-box-shadow: 0 1px 2px rgba( 0, 0, 0, .5 )#999;
    -o-box-shadow: 0 1px 2px rgba( 0, 0, 0, .5 );
    box-shadow: 0 1px 2px rgba( 0, 0, 0, .5 );
}

.ribbon {
    position: relative;
    width: 160px;
    height: 20px;
    top: 40px;
    left: -10px;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    padding-left: 15px;
    text-shadow: 0 -1px 0 rgba( 0, 0, 0, .3 );
    color: #fff;
    background: #e79;
    background: -moz-linear-gradient( 145deg, transparent 5px, #e79 6px ),
                -moz-linear-gradient( 215deg, transparent 5px, #e79 6px ),
                -moz-linear-gradient( left, #f9b, #fff 1px, #f9b 4px, #e79 ),
                -moz-linear-gradient( left, #f9b, #fff 1px, #f9b 4px, #e79 );
    background: -webkit-linear-gradient( 145deg, transparent 5px, #e79 6px ),
                -webkit-linear-gradient( 215deg, transparent 5px, #e79 6px ),
                -webkit-linear-gradient( left, #f9b, #fff 1px, #f9b 4px, #e79 ),
                -webkit-linear-gradient( left, #f9b, #fff 1px, #f9b 4px, #e79 );
    background: -o-linear-gradient( 145deg, transparent 5px, #e79 6px ),
                -o-linear-gradient( 215deg, transparent 5px, #e79 6px ),
                -o-linear-gradient( left, #f9b, #fff 1px, #f9b 4px, #e79 ),
                -o-linear-gradient( left, #f9b, #fff 1px, #f9b 4px, #e79 );
    background: linear-gradient( 145deg, transparent 5px, #e79 6px ),
                linear-gradient( 215deg, transparent 5px, #e79 6px ),
                linear-gradient( left, #f9b, #fff 1px, #f9b 4px, #e79 ),
                linear-gradient( left, #f9b, #fff 1px, #f9b 4px,...