CSS using div as a mask - html

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>

Answer 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>