Как рисовать пользовательскую форму круга в CSS3?

Question

Я пытаюсь сделать эту конкретную форму:

Он должен иметь две прямые грани, и я не могу управлять, чтобы создать лучшую форму, кроме полукруга. Можно ли каким-либо образом вычленить эти части из круга с помощью CSS, или просто извлечь изображение из файла .psd так, как оно есть?

Answer 1

Я взял Тома ответ и добавленное переполнение: скрытый до дел.

Таким образом, вам не нужно, чтобы установить DIV на границе тела

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

Answer 2

HTML

<div id="circle"> </div> 

CSS

#circle { 
    width: 100px; 
    height: 100px; 
    background: red; 
    -moz-border-radius: 50px; 
    -webkit-border-radius: 50px; 
    border-radius: 50px; 
} 

Выход:

Working Fiddle

Обновленный 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; 
    } 

Проверьте это в Chrome, Updated Fiddle

Выход:

Answer 3

Делайте это с помощью CSS после собственности как так:

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

И в HTML:

<div id="circle"></div>