html - 如何在 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>