Untitled

dabblet.css

// http://cssdeck.com/item/175/pure-css3-smooth-ribbon-with-borders
//http://jsfiddle.net/Calou/juQ9n/

.container
{
position: relative;
margin: 100px;
height: 300px;
border: 1px solid green;
margin: 4em;
}
.left
{
background: red;
position: absolute;
top: 4em;
left: 0;
text-align: center;
padding: 0 2em;
line-height: 2em;
box-sizing: border-box;

-webkit-transform: rotate(-45deg);
-webkit-transform-origin: 0 100%; 
}


.right
{
background: red;
position: absolute;
top: 8em;
left: 0;
text-align: center;
padding: 0 4em;
line-height: 2em;
box-sizing: border-box;

-webkit-transform: rotate(-45deg);
-webkit-transform-origin: 0 100%; 
}

dabblet.html

<div class="container">
<div class="left">Ribbon</div>

<div class="right">Longer Ribbon</div>
</div>

settings.json

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