制作半嵌套圆的最简单方法是什么？

Question

我有 4 个圆圈，我想要它们是如下所示的半圆https://i.stack.imgur.com/7hfx7.png 当我尝试将它们减半时，下面会发生什么我不知道为什么，这就是我在下面尝试时的工作原理，我添加了它们 border-top-left-radius 和 border-top-right-radius 以使它们全部成为半圆，但只有第一个起作用，其他的移动了如您所见，向右。有没有其他方法可以使这个实现更容易？https://i.stack.imgur.com/ALvx8.png #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

我会使用变换：

.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 2

我认为这非常简单，使用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 3

修复了你的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 4

由于圆圈共享许多相似的 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 5

我会为此使用渐变，而不是元素。为了“封装”边框，您需要添加第一个白色区域的终点和第二个白色区域的起点（--fill-color）。

为了避免增加边框宽度 (--border-thickness) 时出现模糊，您需要添加开始值和结束值来创建颜色范围。我在第一个蓝色圆圈中展示了如何做到这一点。

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 6

您可以尝试仅使用一个元素来执行此操作：

.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 7

您可以尝试仅使用一个元素来执行此操作：

.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>