The left part of the background:

dabblet.css

.clock{
	/* The .clock div. Created dynamically by jQuery */
	background-color:#252525;
	height:200px;
	width:200px;
	position:relative;
	overflow:hidden;
	float:left;
}

.clock .rotate{
	/* There are two .rotate divs - one for each half of the background */
	position:absolute;
	width:200px;
	height:200px;
	top:0;
	left:0;
}

.rotate.right{
	display:none;
	z-index:11;
}

.clock .bg, .clock .front{
	width:100px;
	height:200px;
	background-color:#252525;
	position:absolute;
	top:0;
}

.clock .display{
	/* Holds the number of seconds, minutes or hours respectfully */
	position:absolute;
	width:200px;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	z-index:20;
	color:#F5F5F5;
	font-size:60px;
	text-align:center;
	top:65px;
	left:0;

	/* CSS3 text shadow: */
	text-shadow:4px 4px 5px #333333;
}

/* The left part of the background: */

.clock .bg.left{ left:0; }

/* Individual styles for each color: */
.orange .bg.left{ background:url(http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/jquery.tzineClock/img/bg_orange.png) no-repeat left top; }
.green .bg.left{ background:url(http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/jquery.tzineClock/img/bg_green.png) no-repeat left top; }
.blue .bg.left{	background:url(http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/jquery.tzineClock/img/bg_blue.png) no-repeat left top; }

/* The right part of the background: */
.clock .bg.right{ left:100px; }

.orange .bg.right{ background:url(http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/jquery.tzineClock/img/bg_orange.png) no-repeat right top; }
.green .bg.right{ background:url(http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/jquery.tzineClock/img/bg_green.png) no-repeat right top; }
.blue .bg.right{ background:url(http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/jquery.tzineClock/img/bg_blue.png) no-repeat right top; }

.clock .front.left{
	left:0;
	z-index:10;
}

dabblet.html

<!-- The first class (green in this case) is assigned dynamically -->
<div class="orange clock">

<!-- This div holds the value of the unit monitored - seconds, minutes or hours -->
<div class="display">5</div>

<!-- A black area that hides the underlying background -->
<div class="front left"></div>

<!-- The left part of the background: -->
<div class="rotate left">
<div class="bg left"></div>
</div>

<!-- The right part of the background: -->
<div class="rotate right">
<div class="bg right"></div>
</div>

</div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}