我已经创建了一个简单的汉堡菜单图标,其中我希望中间的线比其他两条线稍微短一些。是否可以 不 创建多个
以下是我想要实现的效果和我目前拥有的效果对比:
我的 CSS:
div
来完成这个操作?我的当前解决方案是通过多个 box-shadows
实现的,请参考我的工作示例。以下是我想要实现的效果和我目前拥有的效果对比:
![enter image description here](https://istack.dev59.com/0Ifcw.webp)
.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;
}
谢谢!