Skip to content

Instantly share code, notes, and snippets.

@yardfarmer
Forked from csssecrets/dabblet.css
Created May 22, 2016 07:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yardfarmer/3910085224bb652eb94053386551f05f to your computer and use it in GitHub Desktop.
Save yardfarmer/3910085224bb652eb94053386551f05f to your computer and use it in GitHub Desktop.
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