Question

如何创建两个单独的div，css形状相互重叠？我需要能够将内容加载到特定的div。

形状是圆形，然后是圆角矩形。我需要能够放置自定义img以适应圆圈并将小副本和图像放入矩形。

有什么建议吗？现在，我只把所有内容放在一个div中。

<div class="box">
<img src="images/profile_image.png" /><br />
First Last <br />Chicago, IL
<br /></div>

继承人的CSS：

 margin: 4px;
 border: 1px solid #58585B;
 text-align:left;
 font-size:12px;
 width:200px;
 border-radius:10px;

Answer 1

对于这个任务，我会使用2个div并使圆圈具有z-index值，以便它与矩形div重叠。使您的border-radius尺寸相当大，以便圆形div准确地类似于该形状。

尝试使用此代码：

CSS：

#circle {
background-color:#333333;
width:50px;
height:50px;
border-radius:25px;
z-index:10;
margin-left:25px;

}

#rectangle {
width:100px;
height:50px;
border-radius:10px;
background-color:#AAAAAA;
}

HTML：

<div id ="rectangle">
<div id="circle">
</div>
</div>

这是一个jsFiddle

如何创建两个div形状以相互叠加

1 个答案: