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

Question

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

The link doesn't appear to work, which demonstrates why we ask for resources - such as reference images, and code - to be posted in the question itself. — David Thomas
– David Thomas, Commented Jul 14, 2023 at 12:07
ok this is really realy weird - I really dont know why the link doesn work because it's written correctly. If you google stampfinity it will show the first result. — Mike D.crypted
– Mike D.crypted, Commented Jul 14, 2023 at 14:12
I actually added the picture when creating the post, but I dont know why it didnt post. I'm totally new to stackoverflow, sorry about that! Here's the google link which referrs to the correct site google.com/… — Mike D.crypted
– Mike D.crypted, Commented Jul 14, 2023 at 14:13
I just added the picture in the description, I hope it works now — Mike D.crypted
– Mike D.crypted, Commented Jul 14, 2023 at 14:14

Temani Afif · Accepted Answer · 2023-07-14 14:19:33Z

2

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>

answered Jul 14, 2023 at 14:19

Temani Afif

280k30 gold badges378 silver badges502 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

David Thomas Over a year ago

A link to the MDN documentation of mask-composite, that sounds fantastic and which I'd never heard of before today; thanks!

nothing · Accepted Answer · 2023-07-14 14:47:23Z

1

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>

answered Jul 14, 2023 at 14:47

nothing

858 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related