css - 用CSS创建两个 'Bars'颜色？

Question

我正在使用一些 (Bootstrap) CSS。现在，我正在重新构造导航栏。这是我正在处理的部分的 CSS。

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #000000;
  background-color: #transparent;
}

我专门负责背景部分。我想在顶部画一条颜色带，然后在下面有透明度(或另一种颜色)。与渐变不同，我不希望它们混合。我在 Photoshop 中创建了这个模型(如果可能的话，黑色代表我想要透明的部分)。

Mockup Image

Answer 1

我不确定这是否是您想要的，但请尝试在顶部添加边框:

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #000000;
    background-color: #transparent;
    border-top: 3px solid #FF9900;
}