Reputation: 13
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.
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.
Any suggestions? Right now, I just have all the content in one div.
<div class="box">
<img src="images/profile_image.png" /><br />
First Last <br />Chicago, IL
<br /></div>
Heres the CSS:
margin: 4px;
border: 1px solid #58585B;
text-align:left;
font-size:12px;
width:200px;
border-radius:10px;
Upvotes: 1
Views: 6756
Reputation: 3014
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.
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
Upvotes: 3