gnome-shell 上的 css 制作斜角按钮

Question

我是 gnome-shell 改装的新手。我一直在努力对我的 gnome-shell 主题进行一些修改。我喜欢老式的、简单的 *box 桌面的概念。所以我尝试将我的 gnome-shell 修改为看起来像一个。

我试图在我的 gnome-shell 上做一些斜面，结果是这样的。我不知道我的代码有什么问题，我尝试了很多组合。

http://i.stack.imgur.com/E0aRq.png

我想至少做一个这样的，可以吗？

http://i.stack.imgur.com/gFuL1.png

这是我的代码

.panel-button {
        -natural-hpadding: 12px;
        -minimum-hpadding: 8px;
        font-weight: bold;
        color: #4A4A4A;
        border: 3px solid #000000;
        border-top: 3px solid transparent;
        border-bottom: 5px solid #000000;
        box-shadow: 
            1.5px 1.5px 0px rgba(0,0,0,1), /*bottom external highlight*/
            0px 0px 3px #666, /*top external shadow*/ 
            inset 0 -1px 1px #000000, /*bottom internal shadow*/ 
            -1px -1px 1px rgba(255,255,255,1); /*top internal highlight*/;
}

对不起，我的英语不好。

Answer 1

我不知道 gnome shell 在样式方面是否有什么特别之处，但希望它能起作用。

JSFiddle

button {
    height: 25px;
    background: #ddd;
    border-bottom: solid 1px #aaa;
    border-right: solid 1px #aaa;
    border-top: solid 1px #fff;
    border-left: solid 1px #fff;
}

button.active {
    border-bottom: solid 1px #fff;
    border-right: solid 1px #fff;
    border-top: solid 1px #aaa;
    border-left: solid 1px #aaa;
}