I'm trying to draw this particular shape :
It has to have two straight faces, and I can't manage to create a better shape, other than a semicircle. Is it possible to somehow substract these portions from a circle with CSS, or should I just extract the image from the .psd file as it is ?
Do it with css after property like so:
#circle { width: 100px; height: 100px; } #circle:after { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; display: block; content: ''; position: absolute; top: -5px; left: -5px; } And in html:
<div id="circle"></div> 
position: relative; to #circle and replace top left in circle:after to right: 15px; bottom: 15pxI have taken Tom answer and added overflow: hidden to the div.
This way, you don't need to set the div on the border of the body
CSS
#circle { position: relative; left: 40px; top: 40px; width: 100px; height: 100px; overflow: hidden; } #circle:after { width: 100px; height: 100px; background: red; border-radius: 50%; display: block; content: ''; position: absolute; top: -20px; left: -5px; } HTML
<div id="circle"> </div> CSS
#circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } Output:
Updated CSS
#circle { width: 400px; height: 400px; background: red; -webkit-border-top-left-radius: 80px; -webkit-border-top-right-radius: 100px; -webkit-border-bottom-right-radius: 200px; -webkit-border-bottom-left-radius: 200px; } Check this in Chrome, Updated Fiddle
Output:
