下面的图片显示了我想在我的一个页面中显示的设计
我更多的是开发人员而不是设计师,所以如上所示的设计对我来说是更高级别的。那么有关如何实现上述任务的任何建议或提示? (通过jsfiddle或任何此类平台的示例将非常有用;))
答案 0 :(得分:2)
我肯定会关闭你的问题,因为它缺乏你的努力,但正如你所说,你根本不知道如何实现这一点,所以想在这里发布我的解决方案......
您可以使用CSS浮动和border-radius
来实现...
说明:在这里,我使用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: "";
}