Comment montrer uniquement la moitié supérieure d'un ensemble d'éléments circulaires ?

Question

J'ai créé 4 cercles. L'un est le cercle parent (couleur de fond) et 3 cercles intérieurs (j'ai défini une bordure blanche pour chacun).

Je dois créer un cercle comme l'image ci-dessous sur ma page et j'ai essayé le code ci-dessous mais j'obtiens un cercle complet. J'ai besoin de savoir comment afficher seulement un demi-cercle sur la page ?

Est-ce la meilleure façon d'afficher le cercle sur la page ?

.circle-big {
  width: 800px;
  height: 800px;
  background: linear-gradient(180deg, rgba(255, 176, 0, 0) 0%, rgba(255, 176, 0, 0.32) 100%);
  border-radius: 50%;
  position: relative;
}

.circle-big div:nth-child(1) {
  width: 600px;
  height: 600px;
}

.circle-big div:nth-child(2) {
  width: 400px;
  height: 400px;
}

.circle-big div:nth-child(3) {
  width: 200px;
  height: 200px;
}

.circle-big>div {
  border: 20px solid #fff;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

<div class="circle-big">
  <div></div>
  <div></div>
  <div></div>

</div>

Answer 1

La solution la plus simple pour utiliser votre code serait d'envelopper les cercles dans un conteneur. Ensuite, appliquez la demi-hauteur au conteneur et ajoutez : overflow-y: hidden .

À mon avis, la meilleure approche pour concevoir quelque chose comme ça serait l'utilisation d'un SVG.

.container {
  width: 800px;
  height: 400px;
  overflow-y: hidden;
}

/* original CSS */
.circle-big {
  width: 800px;
  height: 800px;
  background: linear-gradient(180deg, rgba(255, 176, 0, 0) 0%, rgba(255, 176, 0, 0.32) 100%);
  border-radius: 50%;
  position: relative;
}

.circle-big div:nth-child(1) {
  width: 600px;
  height: 600px;
}

.circle-big div:nth-child(2) {
  width: 400px;
  height: 400px;
}

.circle-big div:nth-child(3) {
  width: 200px;
  height: 200px;
}

.circle-big>div {
  border: 20px solid #fff;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

<div class="container">
  <div class="circle-big">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Answer 2

Voici une idée utilisant un seul élément et quelques lignes de code. Il suffit d'ajuster la largeur pour contrôler la taille et la couleur principale est spécifiée une seule fois et le masque créera l'effet de fondu. L'écart est le 10px .

.box {
  width: 400px;
  aspect-ratio: 2;
  border-radius: 999px 999px 0 0;
  background: repeating-radial-gradient(at bottom, #f7e4ba 0 calc(18% - 10px), #0000 0 18%);
  -webkit-mask: linear-gradient(#0000,#000);
}

<div class="box"></div>

Answer 3

J'évite autant que possible de coder les tailles en dur. En utilisant un élément conteneur dont le débordement est masqué, ainsi qu'une marge supérieure négative, nous pouvons réduire de moitié vos cercles, indépendamment de la taille de l'élément. leur taille.

Les dimensions sont réduites pour une meilleure démonstration.

.overflow-hidden {
  overflow: hidden;
}

.inline-block {
  display: inline-block;
}

.circle-big {
  width: 200px;
  height: 200px;
  background: linear-gradient(180deg, rgba(255, 176, 0, 0) 0%, rgba(255, 176, 0, 0.32) 100%);
  border-radius: 50%;
  position: relative;
  margin-bottom: -50%; /* <---- here's your huckleberry */
}

.circle-big div:nth-child(1) {
  width: 150px;
  height: 150px;
}

.circle-big div:nth-child(2) {
  width: 100px;
  height: 100px;
}

.circle-big div:nth-child(3) {
  width: 50px;
  height: 50px;
}

.circle-big>div {
  border: 5px solid #fff;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

<p>Unaffected content above.</p>

<div class="overflow-hidden inline-block">
  <div class="circle-big">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

<p>Unaffected content below.</p>