Promo star

dabblet.css

/**
 * Promo star
 */

@import url(http://fonts.googleapis.com/css?family=Lemon);

body{
	width:300px;
	margin:100px auto;
	font-size:100%;
	background-image:radial-gradient(#c453a6 5px,transparent 5px);
	background-repeat:repeat;
	background-size:20px 20px;
	
}
figure{
	position:relative;
}
	figure img{
		box-sizing:border-box;
		border:0.5em solid #c453a6;
		border-radius:1em;
		box-shadow:0 5px 0 0 rgba(0,0,0,.8);
		-webkit-filter:sepia(60%);
	}

.promostar{
	position:absolute;
	top:-3em;
	right:-7em;
	z-index:1;
	width:9.375em;  /*equates to 150px - 150/16 = 9.375*/
	height:9.375em;
	background-image:radial-gradient(#fbc146,#fbe033,#fbf19c);
	background-color:#fbe033;
	border-radius:0.5em;
	transform:rotate(8deg);
}
	.promostar:before,
	.promostar:after{
		content:" ";
		position:absolute;
		top:0;
		left:0;
		z-index:0;
		display:block;
		width:100%;
		height:9.375em;
		background-image:radial-gradient(#fbc146,#fbe033,#fbf19c);
		background-color:#fbe033;
		border-radius:0.5em;
		transform-origin:50% 50%;
	}
	.promostar:before{
		transform:rotate(60deg);
	}
	.promostar:after{
		transform:rotate(25deg);
	}
	.promostar-label{
		position:relative;
		z-index:1;
		padding-top:1.5em;
		color:#fb3f31;
		text-shadow:0 1px 0 rgba(255,255,255,.5);
		text-align:center;
		font:normal bold 1.25em/1.2em 'Lemon',sans-serif;
	}

dabblet.html

<figure>
	<div class="promostar">
		<p class="promostar-label">Free kittens!</p>
	</div>
	<img src="http://placekitten.com/300/300" alt="Lovely free kitten!" />
</figure>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}