The idea was to generate badges for different types of users on the fly. Just by defining a new color. The solution is using an UTF-8 character for the corner: ◤ U+25E4
You can see the example page here:
CSS3-badges
1. Step: Use UTF-8
<meta charset="utf-8">
2. Step: The badge style
.badge {
font-family: Arial,san-serif;
font-size: 10px;
line-height: 1em;
padding: 0px 15px 0px 3px;
text-transform: uppercase;
border: 1px solid #ccc;
color: #666666;
position: relative;
background: #f1f1f1;
}
.badge:before {
content: '\25E4';
width: 12px;
height: 12px;
display: block;
background: #fff;
position: absolute;
right: -1px;
bottom: -1px;
font-size: 15px;
line-height: 10px;
color: #bdbdbd;
}
.badge:hover {
color: #2D3441;
cursor: pointer;
}
3. Step: The badge markup
<span class="badge" title="Default Badge">Default Badge</span>

