CSS using div as a mask

Question

So, I've been trying to use an hamburger menu I made from 3 stacked div tags as a mask for a background with a color gradient (the red/yellow one, the blue/violet one is the main background). The result I would like to achieve is this: result I know I could simply use a svg file of the hamburger, but I would like to do this with the div tags I made so I can later animate them to transition in a x icon, as this whole thing is to create a sidebar.

html, body {
    height: 100%;
    background: linear-gradient(-45deg, #c850c0, #4158d0);
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
}

.hamburger{
    background: linear-gradient(-45deg, #faf617, #ff0000);
    width: 50px;
    height: 40px;
    position: absolute;
    top: 20px;
    padding: 1px;
    left: 20px;
}

.line{
    width: 30px;
    height: 4px;
    margin: 7px;
    border-radius: 2px;
    display: block;
    background-color: #ffffff;
}

<div class="hamburger">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
</div>

Your can also shipmate svg, so no need to use divs

cloned
– cloned

2020-04-18 15:35:07 +00:00
Commented Apr 18, 2020 at 15:35 — cloned
– cloned, Commented Apr 18, 2020 at 15:35

Temani Afif · Accepted Answer · 2020-04-18 15:11:38Z

1

Give them the same background and play with position to create the effect:

html {
  height: 100%;
  background: linear-gradient(-45deg, #c850c0, #4158d0);
}

.hamburger {
  position: absolute;
  top: 20px;
  left: 20px;
  /* add this to see that it's the same
  background: linear-gradient(-45deg, #faf617, #ff0000);  */
}

.line {
  width: 30px;
  height: 4px;
  margin: 7px;
  border-radius: 2px;
  background: linear-gradient(-45deg, #faf617, #ff0000);
  background-size:calc(100% + 2*7px) calc(100%*3 + 4*7px);
}
.line:nth-child(1) {
  background-position:-7px -7px;  /*7  = 7*1 + 0*4*/
}
.line:nth-child(2) {
  background-position:-7px -18px; /*18 = 7*2 + 1*4*/
}
.line:nth-child(3) {
  background-position:-7px -29px; /*29 = 7*3 + 2*4*/
}

<div class="hamburger">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
</div>

Another idea where you can use mask with a pseudo element. The trick is to not set position to .line to make the pseudo element positionned relatively to the hamburger then you hide the overflow using mask:

html {
  height: 100%;
  background: linear-gradient(-45deg, #c850c0, #4158d0);
}

.hamburger {
  position: absolute;
  top: 20px;
  left: 20px;
  /* add this to see that it's the same
  background: linear-gradient(-45deg, #faf617, #ff0000);  */
}

.line {
  width: 30px;
  height: 4px;
  margin: 7px;
  border-radius: 2px;
  -webkit-mask:linear-gradient(#fff,#fff);
          mask:linear-gradient(#fff,#fff);
}
.line:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: linear-gradient(-45deg, #faf617, #ff0000);

}

<div class="hamburger">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
</div>

edited Apr 18, 2020 at 15:11

answered Apr 18, 2020 at 15:03

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

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

8 Comments

pierluromani Over a year ago

Ok, the second idea is the one that seems the simplest to me. But I wonder, what if I change the position, orientation and number of the lines to make them transition into an x shape? Will they move without shifting or moving the gradient?

Temani Afif Over a year ago

@pierluromani The movement will be tricky because if you will transform you will break the containing block. I am thinking about how you can do this and have animation at the same time

pierluromani Over a year ago

Also, the logic behind it isn't really clear to me. Maybe it's because I'm not really an html and css expert, but could you try to explain it to me in a "simple" way?

pierluromani Over a year ago

I searched so much on google about masks, clips, clip-paths... But the only thing I icould find is to make a mask by using standar shapes like a rectangle or a circle, nothing about making a mask using a "custom built" shape

Temani Afif Over a year ago

@pierluromani the logic here is that each line will have a pseudo element placed relatively to hamburger so we have 3 exact same elements above each other. Until now it's easy. Now if I apply the mask I will show only a part of each pseudo element and I will hide what is outside the line. Basically the pseudo element is having its size/position based on the hamburger but its visible part based on line.

|

Collectives™ on Stack Overflow

CSS using div as a mask

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related