ribbon banner

dabblet.css

/**
*   ribbon banner
*/
body{
	background: #333;
	padding: 35px 0 0;
	position: relative;
}
.ribbon {
	position:relative;
	width: 241px;
	margin: 0 auto;
}
.ribbon:before {
    content: "";
    margin-top:0.5em;
    float: left;
    border:1.5em solid #FFF;
    border-left: 20px solid transparent;
}
.ribbon:after {
    content: "";
    margin-top:0.5em;
    /*float: left;*/
    position: absolute;
    right: 0;
    border:1.5em solid #fff;
    border-right: 20px solid transparent;
}

.ribbon span {
    background:#fff;
    display:inline-block;
    line-height:3em;
    padding:0 2em;
    position:absolute;
}

.ribbon span:before {
    content: "";
    position:absolute;
    top:3em;
    left:0;
    border-right:0.5em solid #CCC;
    border-bottom:0.5em solid #fff;
}

.ribbon span:after {
    content: "";
    position:absolute;
    top:3em;
    right:0;
    border-left:0.5em solid #CCC;
    border-bottom:0.5em solid #fff;
}

dabblet.html

<div class='ribbon'>
    <span>Example Text</span>
</div>

settings.json

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