CODEWITHSUNDEEP
cssflexbox
AziCode
AziCode

Reputation: 2692

How can I position a circle that would be halfway in a rectangular div and halfway out of that div?

I'm trying to have a circle on top of a rectangular div, with half of the circle being out of the div.

I first tried to have the upper part of the rectangular div transparent to give the illusion that the circular div is halfway out of the div .

My question:

Is there a better solution to the problem I have ?

See attached picture for the desired result

enter image description here

Upvotes: 1

Views: 496

Answers (3)

Rahul
Rahul

Reputation: 4374

here's my attempt by extending Niyoko's answer

.circle {
  background: red;
  width: 100px;   /* circle diameter */
  height: 100px;   /* circle diameter */
  border-radius: 50%;
  position: absolute; 
  top: 0; 
  left: 50%;
  margin: -50px 0 0 -50px; /* minus circle radius */
}
.rectangle {
  background: blue;
  width: 300px;
  height: 150px;
  margin-top: 50px;   /* circle radius */
  position: relative;
}
.inner-wrap {
    text-align: center;
    color: #fff;
    padding: 60px 10px 10px 10px;
}
<div class="container">
  <div class="rectangle">
    <div class="circle"></div>
    <div class="inner-wrap">
      <p>some text</p>
      <p>some text</p>
    </div>
  </div>
</div>

Upvotes: 0

Jerome Indefenzo
Jerome Indefenzo

Reputation: 967

Another option is to use css 2d transforms to manually move the circle out of the box. This lets you use dynamically-sized content for the circular div. However, you won't be able to use the space immediately below the circle unless you transform the content too. Moreover, this won't work if you're trying to target old browsers (IE8 and below).

Here's a fiddle.

And here's a fiddle showing transform being animated from its original position to its transformed position.

Upvotes: 2

Niyoko
Niyoko

Reputation: 7672

Try css below. Circle has absolute position, 50% left, and give negative margin same as radius of the circle so the center of the circle always at the middle of rectangle. Then give negative margin same as radius to the top margin, so the circle appears out of the div.

.circle {
  background: red;
  width: 100px;   /* circle diameter */
  height: 100px;   /* circle diameter */
  border-radius: 50%;
  position: absolute; 
  top: 0; 
  left: 50%;
  margin: -50px 0 0 -50px; /* minus circle radius */
}
.rectangle {
  background: blue;
  width: 300px;
  height: 100px;
  margin-top: 50px;   /* circle radius */
  position: relative;
}
<div class="container">

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

Upvotes: 0

Related Questions