【问题标题】：How can I draw a custom circle shape in CSS3?如何在 CSS3 中绘制自定义圆形？
【发布时间】：2014-01-28 02:09:28
【问题描述】：

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

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

【问题讨论】：

这当然可以。等待更好的答案。

【解决方案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>

【讨论】：

这正是我想要做的。输出很好，但是如果我想把这个图像放在 html 画布的中间，我该怎么做？ IE。我不允许使用负坐标。
如果不能使用负坐标，请将position: relative; 添加到#circle 并将circle:after 的左上角替换为right: 15px; bottom: 15px
如果你使用canvas，你应该可以用javascript在其中绘制这个形状，或者你可以像here一样将div放在它上面

【解决方案2】：

我接受了汤姆的回答，并在 div 中添加了溢出：隐藏。

这样就不用在body的边框上设置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

【讨论】：

【解决方案3】：

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

输出：

【讨论】：

感谢您的快速回复，但我认为这与上图略有不同。我想创建一个有两个直边的圆，我已经搜索了几个小时以上的结果。我很确定这可以在 css 中完成，但我不知道如何。
是的，我需要复制该图像，我想知道它是否可以在 CSS 中完成。