Css 如何制作pinterest.com左上角的三行按钮？

我说的是3行，而不是按钮本身。在pinterest.com的左上角，你如何使用纯CSS而不是图像制作这3行代码？我如何才能优雅地将这三行文字放在这个小按钮空间中？

HTML:

CSS:

。行分隔符{
高度：1px；
背景：#999；
边框底部：1px实心#333；
}

---

background

更改线条颜色，

border-bottom

为其提供阴影效果。根据您的喜好调整颜色。

现在支持方框阴影和html5！ 这是小提琴：

---

有很多方法可以做到这一点。但我要用我知道的最简单的方法发布。它是一个unicode字符：

☰它看起来像这样：☰
 我尝试过使用图片，但对结果不满意。因为是周五，我将跳过“你尝试了什么”的训练，只发布我在谷歌搜索了5秒钟后发现的这个链接：在我发布之前，我已经在谷歌上搜索过了。它似乎不是很坚固，在边界底部：17px双黑；正在更改其中2条线的厚度，而不是所有3条线的厚度。我正在从SO的大师那里寻找一个更优雅的解决方案。如果你没有安装Firebug，那么就这样做——然后，当你想知道如何实现某个结果时，你可以检查相关元素，看看他们是如何做到的。（在Pinterest的例子中，他们使用了一个以图像精灵为背景的按钮。）--或者--这真的很接近，但当我签入JSFIDLE时，它有点不合适@rotaercz是的，我只在本地测试过，JSFIDLE可能是在HTML5中实现的。“我以后会玩更多的。”罗塔尔茨更新，现在正在使用小提琴。原来盒子阴影是一种更可靠的复制线条的方法。伙计，那太完美了。非常感谢。
<a class="menu"><span class="line"></span></a>

.menu {
    border-radius: 3px;
    border: 1px solid #ccc;
    color: #5f5f5f;
    font-weight: bold;
    display: inline-block;
    background-image: linear-gradient(rgb(255, 255, 255), rgb(240, 240, 240));
    width: 36px; 
    height: 30px;
    padding: 2px 0 0 0;
    box-sizing: border-box;
}

.menu:hover {
    background-image: linear-gradient(#e63d44,#c11a22);
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.22);
}

.menu .line {
    background: rgb(184,184,184);
    border-radius: 2px;
    box-shadow: 0 5px 0 0 rgb(184, 184, 184), 0 -5px 0 0 rgb(184, 184, 184);    
    display: block;
    margin: 10px auto 0 auto;
    height: 3px;
    width: 16px;
    content: " ";
    overflow: visible;
}

.menu:hover .line {
    background: rgb(255,255,255);
    box-shadow: 0 5px 0 0 rgb(255,255,255), 0 -5px 0 0 rgb(255,255,255);    
}