html - 具有不同线宽的CSS汉堡菜单图标

Question

我创建了一个简单的汉堡包菜单图标，我希望其中的中间线比其他两条线稍短。这可以不创建多个div 来完成吗？我目前的解决方案是由多个box-shadows， see my working example 完成的.

这是我所拥有的与我想要实现的:

我的 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;
}

谢谢!

Answer 1

是的，这可以在没有额外标记的情况下完成。这是您可以做到的一种方法:

.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>