dabblet.css

.box {
	position: relative;
	width: 300px;
	height: 200px;
	border: 1px solid #cfcfcf;
	background: #fafafa;
	margin: 50px 5px;
	float: left;
}

.ribbon {
	position: absolute;
	top: 0;
	right: 0;
	width: 120px;
	height: 120px;
	overflow: hidden;
}

.ribbon-bg {
	position: absolute;
	top: 30px;
	right: -30px;
	width: 120px;
	margin-top: -17px;
	background: #d00;
	color: #fff;
	font: 20px Helvetica, Arial, Verdana, sans-serif;
	text-align: center;
	-moz-transform: rotate(45deg);
}
.ribbon-in {
	line-height: 28px;
	margin: 2px 0;
	border: 1px dashed #900;
	border-width: 1px 0;
}

dabblet.html

<div class="box">
	<div class="ribbon">
		<div class="ribbon-bg">
			<div class="ribbon-in">-50%</div>
		</div>
	</div>
</div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}