Earlier in my previous post you would have seen CSS3 6 point star, and now it’s the same star but has twelve edges. It’s just an extended version of the previous design. CSS3 has countless features that let us to create infinite shapes and designs.

Twelve Point Star

Demo

CSS

.star-twelve {
    height: 100px;
    width: 100px;
    background: #de00c7;
    position: relative;
    margin: 30px 0 30px 30px;
}
.star-twelve:before {
    content: "";
    position: absolute;
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
    height: 100px;
    width: 100px;
    background: #de00c7;
}
.star-twelve:after {
    content: "";
    position: absolute;
    -moz-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    transform: rotate(-30deg);
    height: 100px;
    width: 100px;
    background: #de00c7;
}

HTML

<div class="star-twelve"></div>

Try and have fun.