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

user_11143904 0
Viewed 41

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?

enter image description here

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

css html
3 Answers

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 class="container">
  <div class="circle-big">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

user_140724200

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 class="box"></div>

user_86203330

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 class="overflow-hidden inline-block">
  <div class="circle-big">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

<p>Unaffected content below.</p>

user_12648040
Related