Skip to content

Instantly share code, notes, and snippets.

@LeaVerou
Created July 14, 2014 00:37
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save LeaVerou/ade57bf12701d56f3d39 to your computer and use it in GitHub Desktop.
Save LeaVerou/ade57bf12701d56f3d39 to your computer and use it in GitHub Desktop.
Scoop corners with only one gradient
/**
* Scoop corners with only one gradient
* Caveats: backdrop must be a solid color,
* dimensions need to be known
* For more flexibility, see: http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/
*/
div {
width: 400px;
height: 300px;
background: #58a;
background-image: radial-gradient(15px circle, white 99%, transparent);
background-position: 200px 150px;
}
// alert('Hello world!');
{"view":"split-vertical","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