CSS3 - badge

A rotated simplest possible badge

by markokristian

HTML

<div class="badge-wrapper">
    <div class="badge">default</div>
</div>

CSS

.badge-wrapper {
    position: relative;
    height:150px;
    margin-left: 20px;
    overflow: hidden;
    margin-top: -7px;
    margin-left: -7px;
}
.badge {
    z-index: 2;
    position: absolute;
    width:150px;
    color :#FCFCFC;
    background-color: #3068A2;
    font-size: 14px;
    display:inline-block;
    text-align:center;
    -webkit-transform-origin: 84px 70px;
    -webkit-transform:rotate(-45deg);
    -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
    border: 1px solid #FCFCFC;
}