Custom top border on div only at the top ot using mask

Question

Hi i want effect like this on my div but only at the top:

I know there is css mask property but it's really complicated to me.

My solution is I created single circle svg and repeat it multiple times but i also need that left/right space.

.container {
  margin: 20px 0;
  height: 400px;
  background: lightgray;
  position: relative;
}

.svg {
  background: url('../../assets/circle-gapped.svg');
  height: 100%;
  background-repeat: repeat-x;
  position: absolute;
  left: 0;
  right: 0;
  top: -30px;
}

<div class="container">
  <div class="svg" />
</div>

I don't know how to upload assest to snippet, this is result of above code:

you can do this either with a pseudo svg element or multiple pseudo-divs. — tacoshy, Nov 24 '20 at 14:18
Can be done with a single pseudo element I think, and no need for a mask as such as it's repeating circles. — A Haworth, Nov 24 '20 at 15:12

Temani Afif · Accepted Answer · 2020-11-24T15:45:43.897

1

Like below:

.box {
  width:300px;
  height:200px;
  background:red;
  -webkit-mask:  /*  20px = radius of circle    50px = 2*radius + 10px (distance between circles)*/
    radial-gradient(circle 20px,transparent 97%, #fff 100%) bottom/50px 200%,
    linear-gradient(#fff 0 0) left /20px 100% no-repeat, /* 20px of left border */
    linear-gradient(#fff 0 0) right/20px 100% no-repeat; /* 20px of right border */
}

<div class="box"></div>

Or like below to have responsiveness:

.box {
  height:200px;
  background:red;
  padding:0 50px;
  -webkit-mask:
    radial-gradient(circle 20px,#fff 97%, transparent 100%) bottom/50px 200% space content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;
  mask-composite: exclude;
}

<div class="box"></div>

edited Nov 24 '20 at 15:45

answered Nov 24 '20 at 14:38

Temani Afif

245,468
26
309
415

But using a pseudo element for the circles works on IE (11 at least) – A Haworth Nov 24 '20 at 15:11
@TemaniAfif Its great but maybe there is a way to make it responsive, i mean when i resize window these left and right border's cut my circles in half until they meet gap betwen circles :/ – 1haker Nov 24 '20 at 15:12
@AHaworth you cannot have transparency with pseudo element – Temani Afif Nov 24 '20 at 15:16
@1haker play with the values, I simply gave you the idea. Consider using percetange, check the repeat, etc – Temani Afif Nov 24 '20 at 15:16
@TemaniAfif Wow, Thank you very much working 100%,, some advanced stuff :D – 1haker Nov 24 '20 at 15:52
Hi @temaniasif, transparency seemed to work, in the radial gradient, am I missing something? Liked your code as short and neat, despite no IE! – A Haworth Nov 24 '20 at 18:01

score 0 · Answer 2 · answered Nov 24 '20 at 15:10

You can do this with a pseudo element on the gray div which has a repeating pattern of radial-gradient circles which are 50% radius gray and transparent for the outer 50%. Of course alter the dimensions and positions to give the exact look you want.

div.yellow {
background-color:yellow;
width: 100vw;
height: 80vh;
}
div.gray {
background-color: gray;
height: 20vh;
width: 100vw;
position: relative;
top: 0;
}
div.gray::after {
 content:' ';
 width: 100vw;
 height: 10vh;
 background-color: transparent;
 position: absolute;
 top: 15vh;
 left: 0;
 z-index: 2;
 background-image: radial-gradient(gray,gray 50%,transparent 50%);
 background-size: 10vh 10vh;
 }

<div class="gray"></div>
<div class="yellow"></div>

Custom top border on div only at the top ot using mask

2 Answers2