CSS используя div в качестве маски

Question

Итак, я пытался использовать меню гамбургера, которое я сделал из трех сложенных тегов div, в качестве маски для фона с градиентом цвета (красный / желтый, синий / фиолетовый - основной фон). Результат, который я хотел бы получить, таков: результат Я знаю, что мог бы просто использовать svg-файл гамбургера, но я хотел бы сделать это с тегами div, которые я сделал, чтобы впоследствии я мог анимировать их переход в значок топора, так как все это заключается в создании боковой панели.

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

Дайте им тот же фон и поиграйте с положением, чтобы создать эффект:

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>

Еще одна идея, где вы можете использовать маску с псевдоэлементом. Хитрость заключается в том, чтобы не устанавливать позицию на .line, чтобы псевдоэлемент располагался относительно гамбургера, а затем скрывать переполнение с помощью маски:

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>