用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;
}