使用轮廓创建CSS形状

Question

我正在尝试创建一个网站，对于导航，我认为这将是咕咕声，如果我可以使用形状，我试图避免使用图像。

我想要创造的特定形状是一个带有边框的新月。

我想要实现的目标：

我的CSS

.bottom_line{
    position: absolute;
    height: 500px;
    width: 500px;
    border: 10px solid black;
    border-radius: 500px;
    box-shadow: 100px 100px 0px 0px red inset;
}

.top_line {
    position: absolute;
    top: 110px;
    left: 110px;
    height: 500px;
    width: 500px;
    border: 10px solid black;
    border-radius: 500px;
}

我想在红色边框周围形成这个形状，而剩下的圆圈，不是红色轮廓的一部分，已经消失了。

Answer 1

经过大量的摆弄，我想出了这个。谢谢，cpshah，你的回答帮助我想出了这个。

.circle {
    position: absolute;
    top: 15px;
    left: 15px;
    height: 500px;
    width: 500px;
    border: 10px solid transparent;
    border-radius: 500px;
    box-shadow: 100px 100px 0px 0px red inset;
}

.bottom_line {
    position: absolute;
    top: 110px;
    left: 110px;
    height: 500px;
    width: 500px;
    border: 10px solid transparent;
    border-radius: 500px;
    box-shadow: 20px 20px 0px -8px purple inset;
    z-index: 2;
}

.top_line {
    position: absolute;
    height: 510px;
    width: 510px;
    border: 10px solid transparent;
    border-radius: 510px;
    box-shadow: 15px 15px 0px 7px purple inset;
    z-index: 1;
}

Answer 2

查看Dropbox的图像，您不希望内弧为圆弧。 所以，你可以将它用于top_line类：

.top_line 
{
position: absolute;
top: 110px;
left: 110px;
height: 430px;
width: 430px;
border-radius: 500px;
z-index:2;
background-color:#FFF;
box-shadow: 9px 10px 0px 0px black inset;
border-bottom-left-radius:300px;
border-top-right-radius:300px;
}