The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */

.ribbon {
	color:white;
	border: 2em solid #1B9EBB;
	border-right: 1.5em solid transparent;
	border-left: 1.5em solid transparent;
	height:100%;
	line-height:0;
	font-size:15px;
	text-align:center;
	position:relative;
	margin:2em auto;
	width:300px;
	padding: 0;
}
.ribbon::before {
	content:'';
	background:transparent;
	border: 1em solid #116678;	
	border-right: 1.5em solid transparent;
	border-left: 1.5em solid transparent;
	border-bottom:none;
	line-height:0;
	position:absolute;
	top:1em; left:1em; right:1em; bottom:0;
}
.ribbon::after {
	content:'';
	background:white;
	position:absolute;
	left:2.5em; top:1.3em; right:2.5em;
	height:30px;
}
	
.ribbon-caption {
	position:absolute;
	font-family:'Open sans', sans-serif;
	font-weight:900;
	font-size:20px;
	text-transform:uppercase;
	display:block;
	background: #1eb2d2;
	line-height:3em;
	top:-2em;
	bottom:-1em;
	left:15px;
	right:15px;
}

dabblet.html

<h3 class="ribbon">
	<span class="ribbon-caption">Ribbon</span>
</h3>

dabblet.js

// alert('Hello world!');

settings.json

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