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

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 {&nbsp; position: relative;}.position-absolute {&nbsp; position: absolute;}.half-circle {&nbsp; &nbsp; width: 200px;&nbsp; &nbsp; height: 100px;&nbsp; &nbsp; border-top-left-radius: 100px;&nbsp; &nbsp; border-top-right-radius: 100px;&nbsp; &nbsp; border: 1px solid black;&nbsp; &nbsp; border-bottom: 0;&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; transform-origin: center bottom;}.half-circle:nth-child(2) {&nbsp; transform: scale(.8);}.half-circle:nth-child(3) {&nbsp; transform: scale(.6);}.half-circle:nth-child(4) {&nbsp; transform: scale(.4);}<div class="position-relative">&nbsp; <div class="half-circle position-absolute"></div>&nbsp; <div class="half-circle position-absolute"></div>&nbsp; <div class="half-circle position-absolute"></div>&nbsp; <div class="half-circle position-absolute"></div></div>或者，您可以更改每个圆圈的宽度和高度并相应地放置它们：.position-relative {&nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; height: 100px;&nbsp; &nbsp; }&nbsp; &nbsp; .position-absolute {&nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; }&nbsp; &nbsp; .half-circle {&nbsp; &nbsp; &nbsp; &nbsp; width: 200px;&nbsp; &nbsp; &nbsp; &nbsp; height: 100px;&nbsp; &nbsp; &nbsp; &nbsp; border-top-left-radius: 100px;&nbsp; &nbsp; &nbsp; &nbsp; border-top-right-radius: 100px;&nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid black;&nbsp; &nbsp; &nbsp; &nbsp; border-bottom: 0;&nbsp; &nbsp; &nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; &nbsp; &nbsp; transform-origin: center bottom;&nbsp; &nbsp; }&nbsp; &nbsp; .half-circle:nth-child(2) {&nbsp; &nbsp; &nbsp; width: 180px;&nbsp; &nbsp; &nbsp; height: 90px;&nbsp; &nbsp; &nbsp; border-top-left-radius: 90px;&nbsp; &nbsp; &nbsp; border-top-right-radius: 90px;&nbsp; &nbsp; &nbsp; bottom: 0;&nbsp; &nbsp; &nbsp; left: 10px;&nbsp; &nbsp; }&nbsp; &nbsp; .half-circle:nth-child(3) {&nbsp; &nbsp; &nbsp; width: 160px;&nbsp; &nbsp; &nbsp; height: 80px;&nbsp; &nbsp; &nbsp; border-top-left-radius: 80px;&nbsp; &nbsp; &nbsp; border-top-right-radius: 80px;&nbsp; &nbsp; &nbsp; bottom: 0;&nbsp; &nbsp; &nbsp; left: 20px;&nbsp; &nbsp; }&nbsp; &nbsp; .half-circle:nth-child(4) {&nbsp; &nbsp; &nbsp; width: 140px;&nbsp; &nbsp; &nbsp; height: 70px;&nbsp; &nbsp; &nbsp; border-top-left-radius: 70px;&nbsp; &nbsp; &nbsp; border-top-right-radius: 70px;&nbsp; &nbsp; &nbsp; bottom: 0;&nbsp; &nbsp; &nbsp; left: 30px;&nbsp; &nbsp; }<div class="position-relative">&nbsp; &nbsp; &nbsp; <div class="half-circle position-absolute"></div>&nbsp; &nbsp; &nbsp; <div class="half-circle position-absolute"></div>&nbsp; &nbsp; &nbsp; <div class="half-circle position-absolute"></div>&nbsp; &nbsp; &nbsp; <div class="half-circle position-absolute"></div>&nbsp; &nbsp; </div>PS：为了嵌套圆圈，我们不一定需要嵌套html。可以像上面一样使用简单的标记。另外，如果您不使用 bootstrap-4，那么您可以删除相对位置、绝对位置类，然后为它们提供样式。

Answer 2

我认为这非常简单，使用border-radius:50%;、display:flex;和overflow:hidden;：*{&nbsp; box-sizing:border-box; font-size:0; /* set font individually due to white space */}html,body{&nbsp; background:#000; margin:0;}#container{&nbsp; width:400px; height:200px; background:#fff; overflow:hidden;}#container div{&nbsp; display:flex; justify-content:center; align-items:center; border-radius:50%;&nbsp; border:1px solid #000; overflow:hidden;}#first-circle{&nbsp; width:400px; height:400px; background:blue;&nbsp;}#second-circle{&nbsp; width:300px; height:300px; background:red;}#third-circle{&nbsp; width:200px; height:200px; background:orange;}#fourth-circle{&nbsp; width:100px; height:100px; background:yellow;}<div id='container'>&nbsp; <div id='first-circle'>&nbsp; &nbsp; <div id='second-circle'>&nbsp; &nbsp; &nbsp; <div id='third-circle'>&nbsp; &nbsp; &nbsp; &nbsp; <div id='fourth-circle'></div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 3

修复了你的CSS。首先你错过了一些分号，剩下的就是反复试验：高度是宽度的一半上边距 -50, -25, 0#first-circle {&nbsp; &nbsp;border-bottom: 0 !important;&nbsp; &nbsp;width: 400px;&nbsp; &nbsp;height: 200px;&nbsp; &nbsp;position: absolute;&nbsp; &nbsp;border: 1px solid #000;&nbsp; &nbsp;border-top-left-radius: 401px !important;&nbsp; &nbsp;border-top-right-radius: 401px !important;&nbsp;}&nbsp;#second-circle {&nbsp; &nbsp;position: absolute;&nbsp; &nbsp;border-bottom: 0 !important;&nbsp; &nbsp;width: 300px;&nbsp; &nbsp;height: 150px;&nbsp; &nbsp;border: 1px solid #000;&nbsp; &nbsp;top: 50%;&nbsp; &nbsp;left: 50%;&nbsp; &nbsp;border-top-left-radius: 301px !important;&nbsp; &nbsp;border-top-right-radius: 301px !important;&nbsp; &nbsp;margin: -50px 0px 0px -150px;&nbsp;}&nbsp;#third-circle {&nbsp; &nbsp;position: absolute;&nbsp; &nbsp;border-bottom: 0 !important;&nbsp; &nbsp;width: 200px;&nbsp; &nbsp;height: 100px;&nbsp; &nbsp;top: 50%;&nbsp; &nbsp;border: 1px solid #000;&nbsp; &nbsp;left: 50%;&nbsp; &nbsp;border-top-left-radius: 201px !important;&nbsp; &nbsp;border-top-right-radius: 201px !important;&nbsp; &nbsp;margin: -25px 0px 0px -100px;&nbsp;}&nbsp;#fourth-circle {&nbsp; &nbsp;position: absolute;&nbsp; &nbsp;border-bottom: 0 !important;&nbsp; &nbsp;width: 100px;&nbsp; &nbsp;height: 50px;&nbsp; &nbsp;border: 1px solid #000;&nbsp; &nbsp;top: 50%;&nbsp; &nbsp;left: 50%;&nbsp; &nbsp;border-top-left-radius: 101px !important;&nbsp; &nbsp;border-top-right-radius: 101px !important;&nbsp; &nbsp;margin: 0px 0px 0px -50px;&nbsp;}

Answer 4

由于圆圈共享许多相似的 css，因此您应该使用一些类来使代码更具可读性。为了达到你想要的效果，你需要确保每个圆的高度是其宽度的 50%，因为它是半圆！之后，您只需将所有元素对齐到底部并将它们居中即可。将绝对定位元素居中的最简单方法是使用left和transform: translateX。.half-circle {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; border: 1px solid #000;&nbsp; &nbsp; border-bottom: 0;&nbsp; &nbsp; border-top-left-radius: 400px;&nbsp; &nbsp; border-top-right-radius: 400px;}.inner {&nbsp; &nbsp; bottom: 0;&nbsp; &nbsp; left: 50%;&nbsp; &nbsp; transform: translateX(-50%);}#first-circle {&nbsp; &nbsp; width: 400px;&nbsp; &nbsp; height: 200px;}#second-circle {&nbsp; &nbsp; width: 300px;&nbsp; &nbsp; height: 150px;}#third-circle {&nbsp; &nbsp; width: 200px;&nbsp; &nbsp; height: 100px;}#fourth-circle {&nbsp; &nbsp; width: 100px;&nbsp; &nbsp; height: 50px;}<div id="first-circle" class="half-circle">&nbsp; &nbsp; <div id="second-circle" class="half-circle inner">&nbsp; &nbsp; &nbsp; &nbsp; <div id="third-circle" class="half-circle inner">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="fourth-circle" class="half-circle inner">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>

Answer 5

我会为此使用渐变，而不是元素。为了“封装”边框，您需要添加第一个白色区域的终点和第二个白色区域的起点（--fill-color）。为了避免增加边框宽度 (--border-thickness) 时出现模糊，您需要添加开始值和结束值来创建颜色范围。我在第一个蓝色圆圈中展示了如何做到这一点。div { /* mostly for show */&nbsp; &nbsp;height: 50vw;&nbsp; &nbsp;background-color: grey;}.circles-background {&nbsp; --fill-color: white;&nbsp; --border-thickness: 2px;&nbsp; --half-border-thickness: calc(var(--border-thickness) / 2);&nbsp; --circles-sizes: 12%;&nbsp; --border-color: #121212;&nbsp;&nbsp;&nbsp; --first-circle-border-color:&nbsp; blue;&nbsp; --first-border-start:&nbsp; &nbsp; &nbsp;calc(var(--circles-sizes) - var(--half-border-thickness));&nbsp; --first-border-end:&nbsp; &nbsp; &nbsp; &nbsp;calc(var(--circles-sizes) + var(--half-border-thickness));&nbsp;&nbsp;&nbsp; --second-circle-border-color: red;&nbsp; --second-border-start:&nbsp; &nbsp; calc(2 * var(--circles-sizes) - var(--half-border-thickness));&nbsp; --second-border-position: calc(2 * var(--circles-sizes));&nbsp; --second-border-end:&nbsp; &nbsp; &nbsp; calc(2 * var(--circles-sizes) + var(--half-border-thickness));&nbsp;&nbsp;&nbsp; --third-circle-border-color:&nbsp; var(--border-color);&nbsp; --third-border-start:&nbsp; &nbsp; &nbsp;calc(3 * var(--circles-sizes) - var(--half-border-thickness));&nbsp; --third-border-position:&nbsp; calc(3 * var(--circles-sizes));&nbsp; --third-border-end:&nbsp; &nbsp; &nbsp; &nbsp;calc(3 * var(--circles-sizes) + var(--half-border-thickness));&nbsp;&nbsp;&nbsp; --fourth-circle-border-color: purple;&nbsp; --fourth-border-start:&nbsp; &nbsp; calc(4 * var(--circles-sizes) - var(--half-border-thickness));&nbsp; --fourth-border-position: calc(4 * var(--circles-sizes));&nbsp; --fourth-border-end:&nbsp; &nbsp; &nbsp; calc(4 * var(--circles-sizes) + var(--half-border-thickness));&nbsp;&nbsp;&nbsp; background: radial-gradient(circle at bottom,&nbsp; &nbsp; var(--fill-color)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var(--first-border-start),&nbsp; &nbsp; var(--first-circle-border-color)&nbsp; var(--first-border-start),&nbsp; &nbsp; var(--first-circle-border-color)&nbsp; var(--first-border-end),&nbsp; &nbsp; var(--fill-color)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var(--first-border-end),&nbsp; &nbsp; var(--fill-color)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var(--second-border-start),&nbsp; &nbsp; var(--second-circle-border-color) var(--second-border-position),&nbsp; &nbsp; var(--fill-color)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var(--second-border-end),&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; var(--fill-color)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var(--third-border-start),&nbsp; &nbsp; var(--third-circle-border-color)&nbsp; var(--third-border-position),&nbsp; &nbsp; var(--fill-color)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var(--third-border-end),&nbsp; &nbsp; var(--fill-color)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var(--fourth-border-start),&nbsp; &nbsp; var(--fourth-circle-border-color) var(--fourth-border-position),&nbsp; &nbsp; var(--fill-color)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var(--fourth-border-end)&nbsp; );}<div class="circles-background"></div>

Answer 6

您可以尝试仅使用一个元素来执行此操作：.box {&nbsp; width:300px;&nbsp; display:inline-flex;&nbsp; box-sizing:border-box;&nbsp; border:2px solid;&nbsp; border-bottom:transparent;&nbsp; border-radius:1000px 1000px 0 0;&nbsp; background:&nbsp; &nbsp; radial-gradient(farthest-side at bottom,transparent 75%,#000 calc(75% + 1px) calc(75% + 2px),transparent calc(75% + 3px)),&nbsp; &nbsp; radial-gradient(farthest-side at bottom,transparent 50%,#000 calc(40% + 1px) calc(50% + 2px),transparent calc(50% + 3px)),&nbsp; &nbsp; radial-gradient(farthest-side at bottom,transparent 25%,#000 calc(25% + 1px) calc(25% + 2px),transparent calc(25% + 3px));}.box::before {&nbsp; content:"";&nbsp; padding-top:50%;}<div class="box"></div><div class="box" style="width:200px;"></div><div class="box" style="width:100px;"></div>

Answer 7

您可以尝试仅使用一个元素来执行此操作：.box {&nbsp; width:300px;&nbsp; display:inline-flex;&nbsp; box-sizing:border-box;&nbsp; border:2px solid;&nbsp; border-bottom:transparent;&nbsp; border-radius:1000px 1000px 0 0;&nbsp; background:&nbsp; &nbsp; radial-gradient(farthest-side at bottom,transparent 75%,#000 calc(75% + 1px) calc(75% + 2px),transparent calc(75% + 3px)),&nbsp; &nbsp; radial-gradient(farthest-side at bottom,transparent 50%,#000 calc(40% + 1px) calc(50% + 2px),transparent calc(50% + 3px)),&nbsp; &nbsp; radial-gradient(farthest-side at bottom,transparent 25%,#000 calc(25% + 1px) calc(25% + 2px),transparent calc(25% + 3px));}.box::before {&nbsp; content:"";&nbsp; padding-top:50%;}<div class="box"></div><div class="box" style="width:200px;"></div><div class="box" style="width:100px;"></div>