CSS3 Ribbon

dabblet.css

/**
 * CSS3 Ribbon
 */

*, *:after,*:before {-webkit-box-sizing:border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
div {
	font-size: 15px !important;
	width: 50%;
	position: relative;
	background: rgb(186, 137, 182);
	color: rgb(255, 255, 255);
	text-align: center;
	padding: 1em 2em;
	margin: 2em auto 3em;
}
div:before, div:after {
	content: "";
	position: absolute;
	display: block;
	bottom: -2em;
	border: 1.5em solid rgb(152, 103, 148);
	z-index: -1;
}
div:before {
	left: -2em;
	border-right-width:2.5em;
	border-left-color: rgba(0, 0, 0, 0);
}
div:after {
	right: -2em;
	border-left-width:2.5em;
	border-right-color: rgba(0, 0, 0, 0);
}
h1 {
	font-size:30px;
	margin:0;
}
h1:before {
	left: 0;
	border-width: 1em 0 0 1em;
}
h1:after {
	right: 0;
	border-width: 1em 1em 0 0;
}
h1:after, h1:before {
	content: "";
	position: absolute;
	display: block;
	border-style: solid;
	border-color: rgb(128, 79, 124) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
	bottom: -1em;
}

dabblet.html

<div><h1 class="ribbon">Dit is cool!</h1></div>

dabblet.js

// alert('Hello world!');

settings.json

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