CODEWITHSUNDEEP
htmlcss
user3341968
user3341968

Reputation: 13

how to create two divs shapes to overlay each other

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

Answers (1)

Jeff P.
Jeff P.

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

Related Questions