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

我创建了一个简单的汉堡菜单图标，我希望其中线比其他两个短一些。可以在不创建多个divs的情况下完成此操作吗？我当前的解决方案是通过多个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;
}

谢谢!

最佳答案

是的，无需额外的标记即可完成此操作。这是您可以执行的一种方法:

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

关于html - 具有不同线宽的CSS汉堡菜单图标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42136894/