manager-badge option1

by Sparrow Squire

HTML

<div class="managers-choice-badge-border"></div>
<div class="managers-choice-badge">Manager Highlighted Product</div>

CSS

body {background: #024992}

.managers-choice-badge-border,
.managers-choice-badge {
	position: absolute;
	top: 30px;
	left: 3%;
    background: #AED024;
    width: 80px;
    height: 80px;
    text-align: center
}

.managers-choice-badge {z-index:2}

.managers-choice-badge-border {
    background: #fff;
    top: 27px;
	margin-left: -3px;
    height: 86px;
    width: 86px
}

.managers-choice-badge-border:before,
.managers-choice-badge-border:after,
.managers-choice-badge:before,
.managers-choice-badge:after {
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: #AED024;
    z-index: -1
}

.managers-choice-badge-border:before,
.managers-choice-badge-border:after {
    background: #fff;
    width: 86px;
    height: 86px
}

.managers-choice-badge-border:before,
.managers-choice-badge:before {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
}


.managers-choice-badge-border:after,
.managers-choice-badge:after {
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
}