Question 161433 in CSS Question posted in
Some basic documentation can be found here.

Can I make multiple round cuts in a div & place circle divs in them using CSS?

I have made some circle div which is present in the main rectangle div just -margin top is given now i want to remove their background colour just from the marked red area

I have tried this approach

.circleCut {
    -webkit-mask-image: radial-gradient(
      circle at 75% top,
      transparent 30px,
      black 31px
    );
  }

which is making a perfect cut in the box but hiding my circles and how can I apply that circlcut class on a same div multiple times

Tags:

2

Answers


  1. 0

    You can use a background and control its size and position to achieve this. I am using CSS variables so you don’t have to manually adjust the calculation. All you have to do is to update the variables.

    I am also adding the rounded element to complete the demo:

    .box {
  --n: 5;    /* number of cut */
  --r: 30px; /*radius of cut*/
  --p: 15px; /* control the space at the edge*/
 
 
  
  background:
    radial-gradient(var(--r) at var(--r) 0, #0000 97%,red)
    var(--p) var(--r)/calc((100% - 2*(var(--p) + var(--r)))/(var(--n) - 1)) 100%
    repeat-x;
  
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-inline: var(--p);
  height: 200px;
}

.box span {
   width: calc(2*var(--r));
   aspect-ratio: 1;
   border-radius: 50%;
   padding: 6px; /* control the gap */
   background: blue content-box;
   box-sizing: border-box;
}
    <div class="box">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
    Login or Signup to reply.
  2. 0

    Set the parent element background at two different colors:

    background: linear-gradient(180deg, cyan 50vh, grey 50vh);

    Then set the border color of each circle to the same color of the top color of parent element:

    background: 1vw solid cyan;

    main {
  display: flex;
  justify-content: space-evenly;
  width: 100vw;
  min-height: 100vh;
  background: linear-gradient(180deg, cyan 50vh, grey 50vh);
}

div {
  width: 15vw;
  height: 15vw;
  margin-top: 35vh;
  border-radius: 50%;
  border: 1vw solid cyan;
  background: #717E8E
}
    <main>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search