如何在CSS3中绘制自定义圆形？

Question

我正在尝试绘制这种特殊的形状：

它必须有两个直面，除了半圆之外，我无法创造出更好的形状。是否有可能以某种方式用CSS从圆圈中减去这些部分，或者我应该直接从.psd文件中提取图像？

Answer 1

在属性之后使用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>

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

我已经接受了汤姆的回答并添加了溢出：隐藏到div。

这样，您无需在正文边框上设置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