Code Snippet: Create a Simple “Winner” Badge Using only CSS

Today I’m just going to share with you something I made over the weekend: a really simple “winner” badge using only CSS3.

First, the Markup:

...
<div class = "badge">
    <div id = "content">Winner</div>
</div>
...

And the CSS:

@font-face {
    font-family: 'AirstreamRegular';
    src: url('../fonts/Airstream/airstream.eot');
    src: url('../fonts/Airstream/airstream.eot') format('embedded-opentype'),
         url('../fonts/Airstream/airstream.woff') format('woff'),
         url('../fonts/Airstream/airstream.ttf') format('truetype'),
         url('../fonts/Airstream/airstream.svg#AirstreamRegular') format('svg');
}

.badge {
    background: rgb(35%, 22%, 12%);
    width: 180px;
    height: 180px;
    left: 150px;
    top: 75px;
    position: relative;
    text-align: center;
    border-radius: 30px;
}
.badge:before, .badge:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: inherit;
    border-radius: inherit;
}
.badge:before {
    -webkit-transform: rotate(30deg);
       -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
         -o-transform: rotate(30deg);
}
.badge:after {
    -webkit-transform: rotate(60deg);
       -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
         -o-transform: rotate(60deg);
}
#content {
    position: relative;
    z-index: 1;
    text-align: center;
    line-height: 180px;
    font-family: 'AirstreamRegular';
    border-radius: 360px;
    background-color: white;
    box-sizing: border-box;
    width: 180px;
    height: 180px;
    font-size: 3.5em;
    color: rgb(35%, 22%, 12%);
    top: 0;
    left: 0;
    background: rgba(224, 214, 187, 1);
}

The end result is what you saw at the beginning of the post.

A special thanks to Alan Johnson for coming up with the original 12-point burst CSS I modified to make this happen.