CSS Split a responsive circle div into halves

Question

I have divs with a border which make them look "circle shape". The last div should be split horizontally into halves with different text, however, still, it should be a circle.

I use Bootstrap and I have no clue how to round half of circle for one div and another div in the responsive design. Could anybody help me out? Thanks a lot! https://www.bootply.com/0ksNKnSjZT

With fixed size, it seems to be easy Half circle with CSS (border, outline only)

P.S. I don't want to use background image if possible.

score 1 · Accepted Answer · answered May 25 '17 at 11:17

You have used the percentage value in border-radius, and percentage values depend on the elements width and height and takes the percentage of small dimension(i.e. width or height).

In your case(in the 3rd circle), the height and width of .bublina not same i.e. height is smaller than width, thats why border-radius:100% is not making it circle.

So you have to use px value instead of % value here like:

 .bublina.upper {
    border-top-right-radius: 300px;
    border-top-left-radius: 300px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
 }

 .bublina.lower {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: 300px;
    border-bottom-left-radius: 300px;
 }

Justinas · Answer 2 · 2017-05-25T10:48:37.057

Use two circles with wrapper, use overflow: hidden to hide half of circle in wrapper. To have round border, use border-radius: 50%

.wrapper {
  position: relative;
}

.wrapper .circle:before {
  content: '';
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0;
  border: 3px solid blue;
  display: block;
  border-radius: 50%;
}

.wrapper .circle.top:before {
  top: 0;
}

.wrapper .circle.bottom:before {
  bottom: 0;
  border-color: red;
}

.wrapper .circle {
  height: 28px;
  overflow: hidden;
  position: relative;
}

.wrapper span {
  position: absolute;
  left: 0;
  top: 15px;
}

<div class="wrapper">
  <span>My Text</span>
  <div class="circle top"></div>
  <div class="circle bottom"></div>
</div>

score 0 · Answer 3 · answered May 25 '17 at 10:44

You can try using px instead of %

.bublina.lower {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: 150px;
    border-bottom-left-radius: 150px;
}

.bublina.upper {
    border-top-right-radius: 150px;
    border-top-left-radius: 150px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

pokeybit · Answer 4 · 2017-05-25T10:57:18.743

With this method you only need to change the width and height values in .circle_holder css, the rest will fall into place, (A width value less than the width of the text would look weird)

.top_circle {
    border-top-left-radius: 10000px;
    border-top-right-radius: 10000px;
    border-top:1px solid gray;
    border-left:1px solid gray;
    border-right:1px solid gray;
    height:50%;
    position:relative;
}

.top_circle div {
    text-align:center;
    vertical-align:bottom;
    position:absolute;
    bottom:-7.5px;
    width:100%;
}

.bottom_circle {
    border-bottom-left-radius: 10000px;
    border-bottom-right-radius: 10000px;
    border-bottom:1px solid gray;
    border-left:1px solid gray;
    border-right:1px solid gray;
    height:50%;
}

.circle_holder {
    position:relative;
    width:123px;
    height:123px;
    padding:0px;
}

<div class="circle_holder">
  <div class="top_circle"><div>Sometext</div></div>
  <div class="bottom_circle"></div>
</div>

CSS Split a responsive circle div into halves

4 Answers4