CSS Tip

Hamburger menu icon

Create a CSS-only hamburger menu icon with 2 gradients. Adjust one value to control the size.

A CSS-only menu icon

.menu {
  width:80px; /* update this to control the size */
  aspect-ratio:1;
  background:
    radial-gradient(closest-side at 50% 25%,#000 96%,#0000) top/20% 40%,
    linear-gradient(#000 50%,#0000 0) top/80% 40% repeat-y;
}

See the Pen Hamburger menu by Temani Afif (@t_afif) on CodePen.

More detail: verpex.com/blog/website-tips/how-to-create-a-responsive-sidebar-menu-using-css