Question

我说的是3行，而不是按钮本身。你如何在pinterest.com的左上角使用纯CSS制作这3行，而不是使用图像？如何以优雅的方式制作适合该小按钮空间的3条线？

Answer 1

现在支持box-shadows和html5！这是小提琴：http://jsfiddle.net/v2w3C/1/

<a class="menu"><span class="line"></span></a>

还有CSS！

.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);    
}

Answer 2

HTML：
<div class="line-separator"></div>

CSS：
.line-separator { height:1px; background: #999; border-bottom: 1px solid #333; }

background更改了线条颜色，border-bottom为其提供了阴影效果。根据自己的喜好调整颜色。

Answer 3

有很多方法可以做到这一点。但我要发布我知道的最简单的方法。这是一个unicode角色：☰，它看起来像这样：☰

如何在pinterest.com的左上角制作3行按钮？

3 个答案: