html - 如何更改这些插图的大小和边框半径

Question

下面是我从 Github Gist 获得的汉堡菜单代码。我想知道的是为什么最后一个条的高度没有改变，我怎样才能在条上添加圆 Angular ？哦，我怎样才能改变酒吧之间的高度？如果其他人拥有具有这些功能的单个 div 汉堡包菜单的 CSS，请告诉我。

.hamburger {
        display: block;
        position: absolute;
        top: .5em;
        right: .5em;
        height: 2.5em;
        width: 2.5em;
        border: .8em solid rgba(0,133,255,1);
        box-shadow: 0 0 0 .1em rgba(255,255,255,0),
            inset 0 .3em 0 0 rgba(255,255,255,1),
            inset 0 1em 0 0 rgba(0,133,255,1),
            inset 0 1.3em 0 0 rgba(255,255,255,1),
            inset 0 2em 0 0 rgba(0,133,250,1),
            inset 0 2.5em 0 0 rgba(255,255,255,1);
}

<div class="hamburger"></div>

Answer 1

这是给你的。您可以根据需要调整圆度、粗细和颜色。

.menu {
            position: relative;
            display: inline-block;
            width: 30px;
            height: 5px;
            top:  0px;
            border-radius: 5px;
            background: #000;
            margin: 0;
        }
        .menu::before {
            content: "";
            position: absolute;
            top: 10px;
            left: 0px;
            width: 30px;
            height: 5px;
            border-radius: 5px;
            background: #000;
        }
        .menu::after {
            content: "";
            position: absolute;
            top: 20px;
            left: 0px;
            width: 30px;
            height: 5px;
            border-radius: 5px;
            background: #000;
        }

<div class="menu"></div>

我让这个最初动画成一个十字架。如果没有动画，您可以减少代码。