Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Flexible quarter ellipse
/**
* Flexible quarter ellipse
*/
div {
display: inline-block;
width: 16em;
height: 10em;
margin: 1em;
background: #fb3;
border-radius: 11% 0 0 0;
}
div:nth-of-type(2) { border-radius: 10% 10%/100% 0 0; }
div:nth-of-type(3) { border-radius: 0 0 100% 0; }
div:nth-of-type(4) { border-radius: 0 0 0 100%; }
<div></div>
<div></div>
<div></div>
<div></div>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.