How can I draw a custom circle shape in CSS3?

Question

I'm trying to draw this particular shape :

enter image description here

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 ?

Surely this can be done. Just wait for a better answer. – daniel__ Jan 27 '14 at 11:27 — daniel__, Jan 27 '14 at 11:27

score 3 · Answer 1 · answered Jan 27 '14 at 11:15

3

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>

answered Jan 27 '14 at 11:15

Tom

3,654
2
16
23

This is exactly what I was trying to do. The output is great but how do I do it if I want to place this image right in the middle of the html canvas ? I.E. I'm not allowed to use negative coordonates. – moonsind Jan 27 '14 at 11:31
If you can't use negative coords, add `position: relative;` to `#circle` and replace top left in `circle:after` to `right: 15px; bottom: 15px` – Tom Jan 27 '14 at 11:39
If you use canvas, you should be able to draw this shape in it with javascript, or you could position div above it like [here](http://stackoverflow.com/questions/5763911/placing-a-div-within-a-canvas) – Tom Jan 27 '14 at 11:42

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

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:

enter image description here

Working Fiddle

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:

enter image description here

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 27 '14 at 11:05

Amarnath Balasubramanian

9,300
8
34
62

2

Thanks for your quick reply, but I think this is slightly different than the picture above. I want to create a circle with two straight edges and I've been surfing for results for more than a couple of hours. I'm pretty sure this can be done in css, but I have no idea how. – moonsind Jan 27 '14 at 11:10
1

Yes, I need to replicate that image and I wanted to know if it can be done in CSS. – moonsind Jan 27 '14 at 11:28

score 1 · Accepted Answer · answered Jan 27 '14 at 18:09

I 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;
}

fiddle

How can I draw a custom circle shape in CSS3?

3 Answers3

Working Fiddle