Abstract Border Radius Shapes

dabblet.css

/**
 * Abstract Border Radius Shapes
 */

.shape {
	background-color: hsla(50,100%,50%,1);
	width: 10%;
	height: 7em;
	margin: 2em auto;
	border-radius: 90% 10% 90% 10% / 50% 10% 50% 10%;
	transition: all .5s ease;
}

.shape:hover {
	border-radius: 50%;
}

dabblet.html

<div class="shape"></div>

settings.json

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