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

How can I create two separate divs with css shapes to overlap each other? I need to be able to load content to the particular divs as well.

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

The shape is a circle then behind is a rounded rectangle. I need to be able to place custom img to fit within the circle and to place small copy and images into the rectangle.

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

Any suggestions? Right now, I just have all the content in one div.

有什么建议?现在,我只在一个div中拥有所有内容。

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

Heres the CSS:

继承人CSS:

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

1 个解决方案

#1

For this task, I would use 2 divs and have the circle with a z-index value so that it will overlap the rectangle div. Make your border-radius size fairly large so that the circle div will accurately resemble that shape.

对于这个任务,我会使用2个div并使圆圈具有z-index值,以便它将与矩形div重叠。使边框半径大小相当大,以便圆形div准确地类似于该形状。

Try using this code:

尝试使用此代码:

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>

here's a jsFiddle

这是一个jsFiddle

#1