Mam 4 kółka i chcę, aby były półokręgami, jak poniżej

enter image description here

Kiedy próbuję zrobić je w połowie tutaj, co dzieje się poniżej

Nie wiem dlaczego, tak to działa, gdy próbowałem poniżej, dodałem je border-top-left-radius i border-top-right-radius, aby wszystkie z nich były półkolami, ale tylko jeden działał, a pozostałe przesunięte w prawo, jak widać. Czy jest inny sposób na ułatwienie tej implementacji?

enter image description here

#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>
0
Timuçin Çiçek 2 kwiecień 2020, 10:32

7 odpowiedzi

Najlepsza odpowiedź

Użyłbym transform:

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

Alternatywnie możesz zmienić szerokość i wysokość każdego koła i odpowiednio je ustawić:

.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: Aby zagnieździć okrąg, nie musimy też koniecznie zagnieżdżać html. Można użyć prostego znacznika, jak powyżej. Ponadto, jeśli nie używasz bootstrap-4, możesz usunąć klasy względne i bezwzględne, a następnie nadać im styl.

1
Bhojendra Rauniyar 2 kwiecień 2020, 08:14

Myślę, że jest to naprawdę łatwe, używając border-radius:50%;, display:flex; i 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>
1
StackSlave 2 kwiecień 2020, 08:49

Mam nadzieję, że tego potrzebujesz:

Zmniejszaj te 2

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

W moim przypadku wysokość jest równa połowie szerokości i to powinno dać pożądany efekt.

UWAGA: Jeśli chcesz zwiększyć szerokość i wysokość koła, być może będziesz musiał dostosować również border-top-left-radius i 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>
0
Manjuboyz 2 kwiecień 2020, 08:01

Naprawiono twój CSS.

Najpierw pominąłeś kilka średników, reszta była metodą prób i błędów:

Wysokość połowa szerokości

Górny margines -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;
 }
0
Turo 2 kwiecień 2020, 08:12

Ponieważ kręgi mają wiele podobnych CSS, powinieneś użyć niektórych klas, aby kod był bardziej czytelny.

Aby osiągnąć to, co chciałeś, musisz upewnić się, że wysokość każdego koła wynosi 50% jego szerokości, ponieważ jest to półkole!

Następnie wystarczy wyrównać wszystkie elementy do dołu i wyśrodkować je. Najłatwiejszym sposobem wyśrodkowania elementu pozycjonowanego absolutnie jest użycie left i 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>
0
Cray 2 kwiecień 2020, 08:18

Użyłbym do tego gradientu, a nie elementów. Aby „zamknąć” granicę, musisz dodać punkt końcowy dla pierwszego białego obszaru i punkt początkowy dla drugiego białego obszaru (--fill-color).

Aby uniknąć rozmycia przy zwiększaniu szerokości obramowania (--border-grubość), musisz dodać wartości początkowe i końcowe, aby utworzyć zakres dla koloru. W pierwszym niebieskim kółku pokazałem, jak można to zrobić.

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>
0
Rickard Elimää 2 kwiecień 2020, 08:46

Możesz spróbować to zrobić używając tylko jednego elementu:

.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>
0
Temani Afif 2 kwiecień 2020, 09:07