Question

我目前正在制作一个非画布菜单，我想让按钮条纹像这个网站上的那样： http://moombahteam.nl/

我得到的代码是：

/* Menu Button */
.menu-button {
position: fixed;
z-index: 1000;
margin: 1em;
padding: 0;
width: 2.5em;
height: 2.25em;
border: none;
text-indent: 2.5em;
font-size: 1.5em;
color: transparent;
background: transparent;
color:black;
font-style: italic;
}

.menu-button::before {  
position: absolute;
top: 0.5em;
right: 0.5em;
bottom: 0.5em;
left: 0.5em;
background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%);
content: '';
}

.menu-button:hover {
opacity: 0.6;
}

按钮代码是

<button class="menu-button" id="open-button"></button>

我已经拥有了所有元素，而且我已经完成了它。我只是不知道如何做线。

帮助将被大大接受！提前谢谢！

Answer 1

在使用背景渐变创建汉堡图标时，您可以在transform: skew(-15deg);元素上使用before来实现此效果

Answer 2

对于该网站，他们使用FontAwesome图标：

.slideout-toggle a:before {
content: "\f0c9";
font-family: FontAwesome;
}

Here是他们使用的图标。

按一下“斜体”按钮

2 个答案: