Html 五行汉堡，纯css

我正在尝试创建一个五行“汉堡”（更像是三层汉堡）菜单，使用纯css和div，如下所示，但有五行而不是三行：

（除非你有完整的代码，否则我真的不想改变方法。否则请坚持使用divs。谢谢！）

EDIT1:Note

ibm.com

有一个四行汉堡。我要5行。有什么建议吗

/*核心样式*/
：根{
--原色：rgba（255、255、255、0.75）；
--次要颜色：rgba（112、48、160）——叠加颜色：rgba（24、39、51、0.85）；
--菜单速度：0.75秒；
}
* {
保证金：0；
填充：0；
框大小：边框框；
}
身体{
字体系列：“Roboto”，无衬线；
线高：1.4；
}
.集装箱{
最大宽度：960像素；
保证金：自动；
溢出：隐藏；
填充：0 3rem；
}
.展示{
背景：var（--原色）；
颜色：#fff；
高度：100vh；
位置：相对位置；
}
.展示：之前{
内容：''；
/*背景：url（'https://images.pexels.com/photos/533923/pexels-photo-533923.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'）无重复的中心/盖*/
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：-1；
}
.橱窗.橱窗内{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
文本对齐：居中；
身高：100%；
}
.展示h1{
字号：4rem；
}
.p{
字体大小：1.3rem；
}
.btn{
显示：内联块；
边界：无；
背景：var（--二次色）；
颜色：黑色；
填充：0.75雷姆1.5雷姆；
页边顶部：1rem；
过渡：不透明度1s缓进缓出；
文字装饰：无；
}
.btn:悬停{
不透明度：0.7；
}
/*菜单样式*/
.菜单包装{
位置：固定；
排名：0；
左：0；
z指数：1；
}
.菜单换行器.切换器{
位置：绝对位置；
排名：0；
左：0；
z指数：2；
光标：指针；
宽度：100px；
/*是50px*/
高度：100px；
/*是50px*/
不透明度：0；
}
.菜单包装.汉堡包{
位置：绝对位置；
排名：0；
左：0；
z指数：1；
宽度：60px；
/*原始60px*/
高度：60px；
/*原始60px*/
填充：1rem；
背景：var（--原色）；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
/*汉堡系列-顶部*/
.menu wrap.汉堡包>div:：before{
内容：''；
位置：绝对位置；
z指数：1；
顶部：-10px；
宽度：100%；
高度：2倍；
背景：红色；
}
/*汉堡包系列-中*/
.菜单包装.汉堡包>div{
位置：相对位置；
flex：无；
宽度：100%；
高度：2倍；
背景：紫色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
过渡：所有0.4s缓解；
}
/*汉堡线-底部*/
.menu wrap.汉堡包>div:：after{
内容：''；
位置：绝对位置；
z指数：1；
顶部：-10px；
宽度：100%；
高度：2倍；
背景：绿色；
}
/*下移线路*/
.menu wrap.汉堡包>div:：after{
顶部：10px；
}
/*切换动画*/
.menu wrap.toggler:选中+.HAMBERG>div{
变换：旋转（135度）；
背景：黑色；
}
/*将线转换为X*/
.menu wrap.toggler:checked+.HAMBERG>div:before，
.menu wrap.toggler:选中+.汉堡>div:之后{
排名：0；
变换：旋转（90度）；
背景：黑色；
}
/*选中此选项时，悬停旋转*/
.menu wrap.toggler:选中：悬停+汉堡>div{
变换：旋转（225度）；
}
/*显示菜单*/
.menu wrap.toggler:选中~.menu{
能见度：可见；
}
.menu wrap.toggler:选中~.menu>div{
变换：比例（1）；
过渡持续时间：var（--菜单速度）；
}
.menu wrap.toggler:选中~.menu>div>div{
不透明度：1；
过渡：不透明度0.4s缓解0.4s；
}
.菜单包装.菜单{
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
可见性：隐藏；
溢出：隐藏；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.menu wrap.menu>div{
背景：var（--叠加颜色）；
边界半径：50%；
宽度：200vw；
高度：200vw；
显示器：flex；
flex：无；
对齐项目：居中；
证明内容：中心；
变换：比例（0）；
过渡：所有0.4s缓解；
}
.menu wrap.menu>div>div{
文本对齐：居中；
最大宽度：90vw；
最大高度：100vh；
不透明度：0；
过渡：不透明度0.4s；
}
.menu wrap.menu>div>div>ul>li{
列表样式：无；
颜色：#fff；
字体大小：1.5rem；
填充：0.25rem；
}
.menu wrap.menu>div>div>ul>li>a{
颜色：继承；
文字装饰：无；
过渡：颜色0.4s；
}

我们知道如何资助“独角兽”和驯服“机器”，同时迫使人们改变他们的思维、工作和娱乐方式。真正地

为所有人的利益优化更改

无论你选择了多少行，制作一个汉堡包都应该是一样的

我只需为每行创建一个

div

。
因此

html

代码如下所示：

如您所见，我为每个div指定了line类，它将用于在

css

中为每一行指定样式。
用于实际创建可见行的

css

如下所示：

.line{
宽度：65px；
高度：5px；
背景：黑色；
边界半径：8px；
利润率：8px；
}

这定义了每一行的样式，并带有

边距
属性