How to show only the top half of a set of circular elements?-CodePudding

I have created 4 circles. One is the parent circle(background color) and 3 inner circles (I have set the white border to each).

I have to create a circle like the below image on my page and I tried the below code but I am getting full circle. I need to know how to show only half circle on the page?

Is this the best way to show the circle on the 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 >
  <div></div>
  <div></div>
  <div></div>

</div>

CodePudding user response：

The easiest "fix" using your code would be to wrap the circles within a container. Then apply the half height to the container and add: overflow-y: hidden.

IMHO the best approach to design something like this would be the use of a 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 >
  <div >
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CodePudding user response：

Here is an idea using one element and a few lines of code. Simply adjust the width to control the size and the main color is specified only once and the mask will create the fading effect. The gap is the 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 ></div>

CodePudding user response：

I like to avoid hard-coding sizes whenever possible. By using a container element with overflow hidden, along with a negative top margin, we can cut your circles in half regardless of their size.

Dimensions scaled down for better demonstration.

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

<p>Unaffected content below.</p>