CSS hamburger menu icon with different line widths - html

Question

I've created a simple hamburger menu icon where I want the middle line to be slightly shorter than the other two. Can this be done without creating multiple divs? My current solution is done by multiple box-shadows, see my working example.
This is what I have vs 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 extra markup. Here is one way you could do it:
.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 shape with minimum possible markup:
Create a element with specific width / height having top / bottom borders.
Use linear-gradient() to draw the central bar and control its size with background-size and position with .background-position css properties.
Necessary HTML:
Only single element (Possibly having a class):
<div class="menu-button"></div>
Necessary CSS:
.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>

Answer 3

My suggestion (using flexbox):
.hamburger {
display: flex;
align-items: center;
width: 40px;
height: 23px;
cursor: pointer;
border-top: 6px solid #0e3c89;
border-bottom: 6px solid #0e3c89;
}
.hamburger::before {
content: "";
width: 70%;
border-bottom: 6px solid #0e3c89;
}
<span class="hamburger"></span>