Untitled

dabblet.css

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
 
html, body {
    height: 100%;
    color: white;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
}

body {
    margin: 0;
    background: #212121;
}

.holder
{
	width: 50%;
	margin: 50px auto;
	position: relative;
}

.time,
.title
{
	display: inline;
}



.title
{
background-color: orange;
padding-right: 50px;
position: relative;
font-size: 12px;
padding: 4px 12px
}

.title:after {
content: " ";
position: absolute;
margin-right: -20px;
right: 0;
width: 0px;
height: 0px;
border-style: solid;
border-width: 23px 21px 0 0;
border-color: orange transparent transparent transparent;
}


.time { 
margin-left: 15px;
padding: 4px 8px;
font-size: 12px;
} 

.time:after
{
content: "";
display: block;
position: absolute;
height: 1px;
background-color: orange;
width: 100%;
margin-top: -20px
}

dabblet.html

<div class="holder">  <div class="title">This is some kind of title</div>  <div class="time">12 April, 2013 </div></div>

dabblet.js

// alert('Hello world!');

settings.json

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