css - 如何在一个圆圈上获得多个仅底部边框

Question

我有 2 个包含一些内容的 div。一个“盒子”和一个“圆圈”现在我只想让它们看起来像一个人物。类似于底部中心带有圆圈部分的盒子。很难用语言来解释它，我想显示一些代码会更好。

标记：

<div class="box">content</div>
<div class="circle">content</div>

CSS：

.box {
    width: 500px;
    height: 700px;
    margin: 0 auto;
    background: green;
    border: 1px solid blue;
}

.circle {
    width: 100px;
    height: 100px;
    margin: -50px auto 0 auto;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 0 10px green,
                            0 0 0 11px blue;
}

现在我想切断圆圈边界的上部（阴影）。任何人都知道如何完成这项工作？也许还有另一种（更好的）方法可以做到这一点？

非常感谢

Answer 1

我不确定我是否完全理解它应该是什么样子。我所做的是我只画了一半的圆圈，然后遮住了边框阴影的上蓝线。

我还在这里找到了另一个解决类似问题的 stackoverflow问题。

    .box {
        width: 500px;
        height: 700px;
        margin: 0 auto;
        background: green;
        border: 1px solid blue;
    }

    .circle {
        width: 100px;
        height: 50px;
        margin: 10px auto 0 auto;
        background: white;
        border-radius:0 0 100px 100px;
        box-shadow: 0 0 0 10px green, 0 0 0 11px blue;
    }

    .mask {
        position:absolute;
        width:120px;
        height: 1px;
        background-color:green;
        left:50%;
        right:50%;
        transform:translateX(-50%);
        top:709px;
    }

    <div class="mask"></div>
    <div class="box">content</div>
    <div class="circle">content</div>