Skip to content

Instantly share code, notes, and snippets.

@LeaVerou

LeaVerou/dabblet.css

Created April 8, 2014 18:38
Show Gist options
  • Save LeaVerou/10168919 to your computer and use it in GitHub Desktop.
Save LeaVerou/10168919 to your computer and use it in GitHub Desktop.
Download ZIP
Beveled corners & negative border-radius with CSS gradients
Raw
dabblet.css
/**
* Beveled corners & negative border-radius with CSS gradients
*/
div {
background: #c00; /* fallback */
background:
linear-gradient(135deg, transparent 10px, #c00 0) top left,
linear-gradient(225deg, transparent 10px, #c00 0) top right,
linear-gradient(315deg, transparent 10px, #c00 0) bottom right,
linear-gradient(45deg, transparent 10px, #c00 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
div.round {
background-image:
radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px);
}
/* Ignore the CSS from this point, it's just to make the demo more presentable */
body {
background: #444 url('http://lea.verou.me/ft2010/img/darker_wood.jpg') bottom;
font-family: sans-serif;
}
div {
width: 500px;
margin:15px auto;
padding:13px 15px;
color: white;
line-height:1.5;
}
p:first-of-type { margin-top: 0 }
p:last-of-type { margin-bottom: 0}
Raw
dabblet.html
<div><p>The main idea is to have 4 gradients that each occupy a quarter of the element's area (one for the bottom left, one for the bottom, on of the top right and one for the top left). Then you set the background to 4 linear gradients with the same color stops (in this case we wanted the corner size to be 10px*, so it was transparent <strong>until</strong> 10px and then the color we want <strong>from</strong> 10px) except the corners that are 45deg, 135deg, 225deg and 315deg respectively.</p>
<p><small>*Actually not exactly 10px, it's the length of the hypotenuse of an isosceles right-angled triangle, which is around 14px</small></p></div>
<div class="round">By using radial gradients, you can simulate rounded corners with a negative radius. Just in this case, don't put the color stops at the exact same position, since the result will be too aliased in most browsers (and kinda still is in Webkit).</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"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