Какой самый простой способ сделать половинные круги?

Question

У меня есть 4 круга, и я хочу их полукруги, как показано ниже

Когда я пытаюсь сделать их наполовину здесь, что происходит ниже

Я не знаю почему, вот как это работает, когда я попробовал ниже, я добавил их border-top-left-radius и border-top-right-radius, чтобы сделать их полукругом, но только первый сработало, остальные сместились вправо как видите Есть ли другой способ сделать эту реализацию проще?

#first-circle {
   border-bottom: 0 !important;
   width: 400px;
   height: 400px;
   position: absolute;
   border: 1px solid #000;
   border-top-left-radius: 401px !important;
    border-top-right-radius: 401px !important
 }
 #second-circle {
   position: absolute;
   border-bottom: 0 !important;
   width: 300px;
   height: 300px;
   border: 1px solid #000;
   top: 50%;
   left: 50%;
   border-top-left-radius: 301px !important;
    border-top-right-radius: 301px !important
   margin: -150px 0px 0px -150px;
 }

 #third-circle {
   position: absolute;
   border-bottom: 0 !important;
   width: 200px;
   height: 200px;
   top: 50%;
   border: 1px solid #000;
   left: 50%;
   border-top-left-radius: 201px !important;
    border-top-right-radius: 201px !important
   margin: -100px 0px 0px -100px;
 }
 #fourth-circle {
   position: absolute;
   border-bottom: 0 !important;
   width: 100px;
   height: 100px;
   border: 1px solid #000;
   top: 50%;
   left: 50%;
   border-top-left-radius: 101px !important;
   border-top-right-radius: 101px !important
   margin: -50px 0px 0px -50px;
 }

 <div id="first-circle">
            <div id="second-circle" >
                <div id="third-circle" >
                  <div id="fourth-circle" >
                  </div>
                  </div>
                  </div>
               </div>

Answer 1

Я думаю, что это действительно легко, используя border-radius:50%;, display:flex; и overflow:hidden;:

*{
  box-sizing:border-box; font-size:0; /* set font individually due to white space */
}
html,body{
  background:#000; margin:0;
}
#container{
  width:400px; height:200px; background:#fff; overflow:hidden;
}
#container div{
  display:flex; justify-content:center; align-items:center; border-radius:50%;
  border:1px solid #000; overflow:hidden;
}
#first-circle{
  width:400px; height:400px; background:blue; 
}
#second-circle{
  width:300px; height:300px; background:red;
}
#third-circle{
  width:200px; height:200px; background:orange;
}
#fourth-circle{
  width:100px; height:100px; background:yellow;
}

<div id='container'>
  <div id='first-circle'>
    <div id='second-circle'>
      <div id='third-circle'>
        <div id='fourth-circle'></div>
      </div>
    </div>
  </div>
</div>

Answer 2

Я бы использовал преобразование:

.position-relative {
  position: relative;
}
.position-absolute {
  position: absolute;
}
.half-circle {
    width: 200px;
    height: 100px;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border: 1px solid black;
    border-bottom: 0;
    box-sizing: border-box;
    transform-origin: center bottom;
}
.half-circle:nth-child(2) {
  transform: scale(.8);
}
.half-circle:nth-child(3) {
  transform: scale(.6);
}
.half-circle:nth-child(4) {
  transform: scale(.4);
}

<div class="position-relative">
  <div class="half-circle position-absolute"></div>
  <div class="half-circle position-absolute"></div>
  <div class="half-circle position-absolute"></div>
  <div class="half-circle position-absolute"></div>
</div>

---

Кроме того, вы можете изменить ширину и высоту каждого круга и расположить их соответственно:

.position-relative {
      position: relative;
      height: 100px;
    }
    .position-absolute {
      position: absolute;
    }
    .half-circle {
        width: 200px;
        height: 100px;
        border-top-left-radius: 100px;
        border-top-right-radius: 100px;
        border: 1px solid black;
        border-bottom: 0;
        box-sizing: border-box;
        transform-origin: center bottom;
    }
    .half-circle:nth-child(2) {
      width: 180px;
      height: 90px;
      border-top-left-radius: 90px;
      border-top-right-radius: 90px;
      bottom: 0;
      left: 10px;
    }
    .half-circle:nth-child(3) {
      width: 160px;
      height: 80px;
      border-top-left-radius: 80px;
      border-top-right-radius: 80px;
      bottom: 0;
      left: 20px;
    }
    .half-circle:nth-child(4) {
      width: 140px;
      height: 70px;
      border-top-left-radius: 70px;
      border-top-right-radius: 70px;
      bottom: 0;
      left: 30px;
    }

<div class="position-relative">
      <div class="half-circle position-absolute"></div>
      <div class="half-circle position-absolute"></div>
      <div class="half-circle position-absolute"></div>
      <div class="half-circle position-absolute"></div>
    </div>

PS: Чтобы вложить круг, нам не обязательно также вкладывать html. Простую разметку можно использовать как выше. Кроме того, если вы не используете bootstrap -4, вы можете удалить относительные по положению, абсолютные по положению классы, а затем придать им стиль.

Answer 3

Я бы использовал для этого градиент, а не элементы. Чтобы «закрыть» границу, необходимо добавить конечную точку для первой белой области и начальную точку для второй белой области (--fill-color).

Чтобы избежать размытия при увеличении границы width (--border-толщина), вам нужно добавить начальное и конечное значения, чтобы создать диапазон для цвета. Я продемонстрировал, как это можно сделать в первом синем круге.

div { /* mostly for show */
   height: 50vw;
   background-color: grey;
}

.circles-background {
  --fill-color: white;
  --border-thickness: 2px;
  --half-border-thickness: calc(var(--border-thickness) / 2);
  --circles-sizes: 12%;
  --border-color: #121212;
  
  --first-circle-border-color:  blue;
  --first-border-start:     calc(var(--circles-sizes) - var(--half-border-thickness));
  --first-border-end:       calc(var(--circles-sizes) + var(--half-border-thickness));
  
  --second-circle-border-color: red;
  --second-border-start:    calc(2 * var(--circles-sizes) - var(--half-border-thickness));
  --second-border-position: calc(2 * var(--circles-sizes));
  --second-border-end:      calc(2 * var(--circles-sizes) + var(--half-border-thickness));
  
  --third-circle-border-color:  var(--border-color);
  --third-border-start:     calc(3 * var(--circles-sizes) - var(--half-border-thickness));
  --third-border-position:  calc(3 * var(--circles-sizes));
  --third-border-end:       calc(3 * var(--circles-sizes) + var(--half-border-thickness));
  
  --fourth-circle-border-color: purple;
  --fourth-border-start:    calc(4 * var(--circles-sizes) - var(--half-border-thickness));
  --fourth-border-position: calc(4 * var(--circles-sizes));
  --fourth-border-end:      calc(4 * var(--circles-sizes) + var(--half-border-thickness));
  
  background: radial-gradient(circle at bottom,
    var(--fill-color)                 var(--first-border-start),
    var(--first-circle-border-color)  var(--first-border-start),
    var(--first-circle-border-color)  var(--first-border-end),
    var(--fill-color)                 var(--first-border-end),

    var(--fill-color)                 var(--second-border-start),
    var(--second-circle-border-color) var(--second-border-position),
    var(--fill-color)                 var(--second-border-end),
    
    var(--fill-color)                 var(--third-border-start),
    var(--third-circle-border-color)  var(--third-border-position),
    var(--fill-color)                 var(--third-border-end),

    var(--fill-color)                 var(--fourth-border-start),
    var(--fourth-circle-border-color) var(--fourth-border-position),
    var(--fill-color)                 var(--fourth-border-end)
  );
}

<div class="circles-background">

</div>

Answer 4

Вы можете попытаться сделать это, используя только один элемент:

.box {
  width:300px;
  display:inline-flex;
  box-sizing:border-box;
  border:2px solid;
  border-bottom:transparent;
  border-radius:1000px 1000px 0 0;
  background:
    radial-gradient(farthest-side at bottom,transparent 75%,#000 calc(75% + 1px) calc(75% + 2px),transparent calc(75% + 3px)),
    radial-gradient(farthest-side at bottom,transparent 50%,#000 calc(40% + 1px) calc(50% + 2px),transparent calc(50% + 3px)),
    radial-gradient(farthest-side at bottom,transparent 25%,#000 calc(25% + 1px) calc(25% + 2px),transparent calc(25% + 3px));
}

.box::before {
  content:"";
  padding-top:50%;
}

<div class="box"></div>
<div class="box" style="width:200px;"></div>
<div class="box" style="width:100px;"></div>

Answer 5

Исправлено css.

Сначала вы пропустили несколько точек с запятой, остальные были методом проб и ошибок:

высота половины ширины

верхнее поле -50, -25, 0

#first-circle {
   border-bottom: 0 !important;
   width: 400px;
   height: 200px;
   position: absolute;
   border: 1px solid #000;
   border-top-left-radius: 401px !important;
   border-top-right-radius: 401px !important;
 }
 #second-circle {
   position: absolute;
   border-bottom: 0 !important;
   width: 300px;
   height: 150px;
   border: 1px solid #000;
   top: 50%;
   left: 50%;
   border-top-left-radius: 301px !important;
   border-top-right-radius: 301px !important;
   margin: -50px 0px 0px -150px;
 }

 #third-circle {
   position: absolute;
   border-bottom: 0 !important;
   width: 200px;
   height: 100px;
   top: 50%;
   border: 1px solid #000;
   left: 50%;
   border-top-left-radius: 201px !important;
   border-top-right-radius: 201px !important;
   margin: -25px 0px 0px -100px;
 }
 #fourth-circle {
   position: absolute;
   border-bottom: 0 !important;
   width: 100px;
   height: 50px;
   border: 1px solid #000;
   top: 50%;
   left: 50%;
   border-top-left-radius: 101px !important;
   border-top-right-radius: 101px !important;
   margin: 0px 0px 0px -50px;
 }

Answer 6

Поскольку круги имеют много общего css, вам следует использовать некоторые классы, чтобы сделать код более читабельным.

Чтобы достичь желаемого, вам нужно убедиться, что высота каждого круга составляет 50% от его ширины, потому что это полукруг!

После этого вам просто нужно выровнять все элементы снизу и отцентрировать их вверх. Самый простой способ центрировать абсолютно позиционированный элемент - использовать left и transform: translateX.

.half-circle {
    position: absolute;
    border: 1px solid #000;
    border-bottom: 0;
    border-top-left-radius: 400px;
    border-top-right-radius: 400px;
}

.inner {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

#first-circle {
    width: 400px;
    height: 200px;
}

#second-circle {
    width: 300px;
    height: 150px;
}

#third-circle {
    width: 200px;
    height: 100px;
}

#fourth-circle {
    width: 100px;
    height: 50px;
}

<div id="first-circle" class="half-circle">
    <div id="second-circle" class="half-circle inner">
        <div id="third-circle" class="half-circle inner">
            <div id="fourth-circle" class="half-circle inner">
            </div>
        </div>
    </div>
</div>

Answer 7

Надеюсь, это то, что вам нужно:

Продолжайте уменьшать эти 2

 `width: 200px;
  height: 100px;`

, в моем случае это высота равна половине ширины, и это должно дать вам желаемый результат.

ПРИМЕЧАНИЕ. Если вы хотите увеличить ширину и высоту круга, возможно, придется настроить border-top-left-radius и border-top-right-radius.

.half-circle {
  width: 200px;
  height: 100px;
  border-top-left-radius: 110px;
  border-top-right-radius: 110px;
  border: 1px solid gray;
  border-bottom: 0;
}

.second-circle {
  margin: 10px;
  width: 180px;
  height: 90px;
  border-top-left-radius: 110px;
  border-top-right-radius: 110px;
  border: 1px solid red;
  border-bottom: 0;
}

.third-circle {
  margin: 10px;
  width: 160px;
  height: 80px;
  border-top-left-radius: 110px;
  border-top-right-radius: 110px;
  border: 1px solid yellow;
  border-bottom: 0;
}

.fourth-circle {
  margin: 10px;
  width: 140px;
  height: 70px;
  border-top-left-radius: 110px;
  border-top-right-radius: 110px;
  border: 1px solid blue;
  border-bottom: 0;
}

<div class="half-circle">
  <div class="second-circle">
    <div class="third-circle">
      <div class="fourth-circle"> </div>
    </div>
  </div>


</div>