Untitled

dabblet.css

.pill {
	height: 30px;
	width: 70px;
	overflow: hidden;
	position: relative;
}

.pill .section.right {
		border-radius: 0px 10px 10px 0px;
}
.pill .section {
	width: 50%;
	height: 100%;
	float: left;
	box-shadow:  inset 0px 2px 1px rgba(255,255,255,0.4);
	border-radius: 10px 0px 0px 10px;
}

.section.red {
background: #c92020;
background: -moz-linear-gradient(top,  #c92020 1%, #a01919 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#c92020), color-stop(100%,#a01919));
background: -webkit-linear-gradient(top,  #c92020 1%,#a01919 100%);
background: -o-linear-gradient(top,  #c92020 1%,#a01919 100%);
background: -ms-linear-gradient(top,  #c92020 1%,#a01919 100%);
background: linear-gradient(top,  #c92020 1%,#a01919 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c92020', endColorstr='#a01919',GradientType=0 );

}

.section.blue {
background: #7db9e8;
background: -moz-linear-gradient(top,  #7db9e8 0%, #2989d8 0%, #207cca 1%, #1e5799 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(0%,#2989d8), color-stop(1%,#207cca), color-stop(100%,#1e5799));
background: -webkit-linear-gradient(top,  #7db9e8 0%,#2989d8 0%,#207cca 1%,#1e5799 100%);
background: -o-linear-gradient(top,  #7db9e8 0%,#2989d8 0%,#207cca 1%,#1e5799 100%);
background: -ms-linear-gradient(top,  #7db9e8 0%,#2989d8 0%,#207cca 1%,#1e5799 100%);
background: linear-gradient(top,  #7db9e8 0%,#2989d8 0%,#207cca 1%,#1e5799 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=0 );
}


.vert {
-webkit-transform: rotate(90deg);
left:-20px;
top: 20px;
}

dabblet.html

<div class="pill">
<div class="section red"></div>
<div class="section blue right"></div>
</div>

<div class="pill vert">
<div class="section blue"></div>
<div class="section blue right"></div>
</div>

settings.json

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