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

How to mask div boxes with multiple shapes in css only?

I’m a novice in coding and I’m trying to figure out how to mask div boxes with multiple circles along the edge on certain positions to get something like this in the picture. The website is www.stampfinity.com – front page scroll down where the gradient boxes are. I am using this for a project in WordPress with enfold theme and editing the css in quick-css class of the theme.

This is how the div boxes are supposed to look:

I have tried several codes that "cut corners" and tried to modify, but whatever attempt I tried, I failed because it just did some complete weird stuff or destroyed the whole thing.

In this particular example, I can move the first circle down, but if I try the next it will just crash the whole thing.

.divbox {

  -webkit-mask:
    radial-gradient(circle 30px at 0% 50%,#0000 98%,#000),
    radial-gradient(circle 30px at top    right,#0000 98%,#000) top    right,
    radial-gradient(circle 30px at bottom left ,#0000 98%,#000) bottom left,
    radial-gradient(circle 30px at bottom right,#0000 98%,#000) bottom right;
  -webkit-mask-size:50% 50%;
  -webkit-mask-repeat:no-repeat;

}

and similar thing if I try this code

.divbox {
  --mask:
    radial-gradient(40px at 0 60%,#0000 98%,#000) 0/51% 100% no-repeat,

    radial-gradient(40px at 0% 80%,#0000 98%,#000) 100%/51% 100% no-repeat;

  -webkit-mask: var(--mask);
          mask: var(--mask);
}

No matter what I try I cannot position the circle just where I want it. Ideally I would simply like to place a circle with X/Y relative positions (i.e. 0% 80%) and adjust circle size to the div box size

Tags:

2

Answers


  1. 0

    Better do this using mask-composite and you can easily adjust the position of the circles

    .box {
  width:300px;
  height: 250px;
  margin: 50px;
  background: red;
  
  --s: 25px at; /* circle size here */
  --g: #000 98%,#0000;
  -webkit-mask: /*           X    Y  */
    radial-gradient(var(--s) 0    80%,var(--g)),
    radial-gradient(var(--s) 0    50%,var(--g)),
    radial-gradient(var(--s) 100% 20%,var(--g)),
    radial-gradient(var(--s) 100% 50%,var(--g)),
    /* don't touch the bottom layer*/
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
    <div class="box"></div>
    Login or Signup to reply.
  2. 0

    Another idea similar to the one provided by Temani Afif without mask-composite:

    .box {
  width:300px;
  height: 250px;
  margin: 50px;
  background: red;
  -webkit-mask: 
   repeating-conic-gradient(#0000 0 25%,#000 0 50%), 
   radial-gradient(25px at 0    50%,#0000 98%,#000) 0    0/51% 25% repeat-y,
   radial-gradient(25px at 100% 50%,#0000 98%,#000) 100% 0/51% 25% repeat-y;
}
    <div class="box"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search