如何使用CSS，CSS3创建所需的形状并相应地定位它们？

Question

下面的图片显示了我想在我的一个页面中显示的设计

我更多的是开发人员而不是设计师，所以如上所示的设计对我来说是更高级别的。那么有关如何实现上述任务的任何建议或提示？ （通过jsfiddle或任何此类平台的示例将非常有用;））

Answer 1

我肯定会关闭你的问题，因为它缺乏你的努力，但正如你所说，你根本不知道如何实现这一点，所以想在这里发布我的解决方案......

您可以使用CSS浮动和border-radius来实现...

Demo

说明：在这里，我使用border-radius作为元素曲线，并使用负margin让乐队隐藏在圆圈后面......

现在这个解决方案可能没有用，如果你有一些背景，因为我在圈子周围使用20px 白色边框......

<强> HTML

<div class="wrap">
    <div class="circle"></div>
    <div class="band_wrap clear">
        <div class="band"></div>
        <div class="band"></div>
    </div>
</div>

<强> CSS

.wrap {
    position: relative;
    width: 390px;
}

.wrap > div.circle {
    height: 150px;
    width: 150px;
    border: 20px solid #fff;
    border-radius: 50%;
    background: #aaa;
    float: left;
    z-index: 1;
    position: relative;
}

.band_wrap {
    position: relative;
    top: 20px;
}

.wrap .band {
    height: 50px;
    background: #aaa;
    width: 200px;
    border-radius: 0 20px 20px 0;
    float: left;
    margin-top: 15px;
    margin-left: -20px;
}

.clear:after {
    clear: both;
    display: table;
    content: "";
}