Question

我有两个div有一些内容。一个＆＃34;框＆＃34;和一个＆＃34;圈＆＃34;现在我想让它们看起来只有一个数字。像一个盒子，底部中心有一个带圆圈的部分。很难用文字解释它我猜想出现一些代码更好。

标记：

<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问题here。

＆＃13;

    .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;
    }

＆＃13;

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

＆＃13;

如何在圆圈上获得多个仅限底部边框

1 个答案: