plum

dabblet.css

/**
 * plum
 */
.rect.raindrop{
	background                      : lightblue;
	width                           : 60px;
	height                          : 60px;
	position                        : absolute; 
	display							: block;
	overflow						: hidden;

	border-radius                   : 80px;
	border-top-right-radius         : 0;
	transition                      : all 1s;
}

.rect.raindrop:nth-child(1) /* yellow */{
	transform                       : rotate(-76deg) skewX(-12deg) skewY(-4deg);
	top                             : 149px;
	left                            : 169px;

	
}
.rect.raindrop:nth-child(2)/* blue */{
	transform                       : rotate(-148deg) skewX(-12deg) skewY(-4deg);
	top                             : 91px;
	left                            : 198px;
}
.rect.raindrop:nth-child(3)/* orange */{
	transform                       : rotate(-220deg) skewX(-12deg) skewY(-4deg);
	top                             : 46px;
	left                            : 151px;
}
.rect.raindrop:nth-child(4)/* pink */{
	transform                       : rotate(-292deg) skewX(-12deg) skewY(-4deg);
	top                             : 78px;
	left                            : 94px;
}
.rect.raindrop:nth-child(5)/* blue */{
	transform                       : rotate(-4deg) skewX(-12deg) skewY(-4deg);
	top                             : 142px;
	left                            : 104px;
}

dabblet.html

<div class="drops">
    <div class="rect raindrop yellow"></div>
    <div class="rect raindrop"></div>
    <div class="rect raindrop orange"></div>
    <div class="rect raindrop pink"></div>
    <div class="rect raindrop tel"></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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