Untitled

dabblet.css

.box { display: inline-block; position: relative;}

.box-inner { 
background: #35b5d0; 
font-family: helvetica; 
color: #FFF; 
margin-left: 22px; 
padding: 0 10px; 
line-height: 2em; }

.box-ribbon {
	position: absolute;
	left: 0;
	top: 0;
	border: 1em solid #35b5d0;
	border-left-color: transparent;
	width: 0;
	height: 0;
}

.box-ribbon2 {
	position: absolute;
	right: 0;
	bottom: -10px;
	border: 5px solid #009abc;
	border-right-color: transparent;
	border-bottom-color: transparent;
	width: 0;
	height: 0;
}

.constrain {
	width: 160px;
}

dabblet.html

<div class="box">
	<div class="box-ribbon"></div>
	<div class="box-inner">kjhdjfkdjsnrksjdowndjskdjeifng</div>
	<div class="box-ribbon2"></div>
</div>

<br><br>

<div class="constrain">
<div class="box">
	<div class="box-ribbon"></div>
	<div class="box-inner">this one is way over the limit of stuff into the end zone</div>
	<div class="box-ribbon2"></div>
</div>
</div>

settings.json

{"view":"split-vertical","fontsize":"110","seethrough":"","prefixfree":"1","page":"all"}