CSS hamburger menu icon with different line widths

Question

I created a simple hamburger menu icon where I want the middle line to be a little shorter than the other two. Can this be done without creating multiple divs ? My current solution is being executed by several box-shadows , see my working example .

This is what I have against what I want to achieve:

My CSS:

 .menu-button:before { content: ""; position: absolute; left: 20px; top: 20px; width: 24px; height: 4px; background: #0e3c89; box-shadow: 0 8px 0 0 #0e3c89, 0 16px 0 0 #0e3c89; } 

Thanks!

Answer 1

Yes, this can be done without additional markup. Here is one way to do this:

 .menu-button { width: 20px; height: 4px; background: #0e3c89; margin: 20px 0 0 20px; } .menu-button:before { display: block; content: ""; width: 28px; height: 4px; box-shadow: 0 -8px 0 0 #0e3c89, 0 8px 0 0 #0e3c89; } 

 <div class="menu-button"></div> 

Answer 2

Here is a way to make this form with the smallest possible markup:

• Create an element with a specific width / height with upper / lower borders.
• Use linear-gradient() to draw a central panel and control its size using background-size and position with .background-position css properties.

Required HTML:

Only one element (possibly having a class):

 <div class="menu-button"></div> 

CSS required:

 .menu-button { // draws the central bar background: linear-gradient(to right, #0e3c89, #0e3c89) no-repeat; background-position: center left; background-size: 85% 4px; // draws the top / bottom bars border: solid #0e3c89; border-width: 4px 0; height: 24px; width: 28px; } 

Screenshot:

 * {box-sizing: border-box;} .menu-button { background: linear-gradient(to right, #0e3c89, #0e3c89) no-repeat; background-position: center left; background-size: 85% 4px; border: solid #0e3c89; border-width: 4px 0; height: 24px; width: 28px; } 

 <div class="menu-button"></div>