CSS Shapes

Chevron.css

.chevron {
    margin-top: 200px;
    margin-left: 200px;
    position: relative;
    width: 100px;
    height: 1px;
}
.chevron .left {
    position: absolute;
    background-color:red;
    width: 100px;
    height: 65px;
    left: -50px;
    transform: skewY(20deg);
    text-align: right;
    color:white;
    padding-top: 10px;
    font-size: 2.5em;
}
.chevron .right {
    position: absolute;
    background-color:red;
    width: 100px;
    height: 65px;
    right: -50px;
    transform: skewY(-20deg);
    text-align: left;
    color:white;
    padding-top: 10px;
    font-size: 2.5em;
}

Chevron.html

<div class="chevron">
    <div class="left">
        Rede
    </div>
    <div class="right">
        emed
    </div>
</div>

fiddle.txt

Chevron:
http://jsfiddle.net/2pf6e3Ls/1/ 

Sixteen Point Star:
http://jsfiddle.net/4w1n3j14/3/

Creature
http://jsfiddle.net/SVJaK/2406/

SixteenPointStar.css

* {
    font-size: 50px;
}

div.badge {
    position: relative;
    margin-left: 1em;
    margin-top: 1em;
}
div.badge, div.twenty, div.sixtyfive, div.onethirtyfive, div.zero {
    background-color: red;
    width: 5em;
    height: 5em;
}
div.twenty, div.sixtyfive, div.onethirtyfive, div.zero {
    position: absolute;
}

div.twenty {
    transform: rotate(20deg);
}
div.onethirtyfive {
    transform: rotate(135deg);
}
div.sixtyfive {
    transform: rotate(65deg);
}
div.zero {
    color: white;
    font-weight: bolder;
    text-align: center;
}
div.zero div {
    position: absolute;
    top: 35%;
    left: 5%;
    transform: translateY(-40%);
    transform: rotate(45deg);
}

SixteenPointStar.html

<div class="badge">
    <div class="twenty"></div>
    <div class="onethirtyfive"></div>
    <div class="sixtyfive"></div>
    <div class="zero">
        <div>Redeemed</div>
    </div>
</div>