I want to draw a curve in center with hamburger so that it take the gradient background color

Question

I have to add a hamburger with a curve in center of the header and it should take the background of the gradient. How to match the gradient background i am getting stuck. Any help would be highly appreciated.

Answer 1

I have an online generator for such shape: https://css-generators.com/section-divider/

Get the shape then place your icon above the rounded part:

.top {
  --mask: 
   linear-gradient(#000 0 0) top/100% calc(100% - 50px) no-repeat,
   radial-gradient(farthest-side,#000 98%,#0000) bottom/100px 100px no-repeat;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  height: 150px;
  background: linear-gradient(90deg,red,blue);
}

<div class="top"></div>

To get the curve you can adjust like below (not provided by the generator):

.top {
  --s: 60px; /* control the size */

  --mask: 
   radial-gradient(100% 100% at 100% 100%,#0000 98%,#000 101%)    
     calc(50% + var(--s)/2 + var(--s)/16) calc(100% - var(--s)/4)/ calc(var(--s)/4) calc(var(--s)/4) no-repeat,
   radial-gradient(100% 100% at 0    100%,#0000 98%,#000 101%)    
     calc(50% - var(--s)/2 - var(--s)/16) calc(100% - var(--s)/4)/ calc(var(--s)/4) calc(var(--s)/4) no-repeat,
   linear-gradient(#000 0 0) top/100% calc(100% - var(--s)/2) no-repeat,
   radial-gradient(farthest-side,#000 98%,#0000) bottom/var(--s) var(--s) no-repeat;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  height: 100px;
  background: linear-gradient(90deg,red,blue);
}

<div class="top"></div>