html - 导航栏链接上的功能区效果

Question

我在引导导航栏菜单中遇到困难。我想创建一个类似于此图像的“丝带”效果:

我已经用 :after 和 :before 属性创建了两个元素，但我无法在左侧部分创建三 Angular 形。

让我向您展示我的代码和代码笔链接。

<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">Link2</a></li>
        <li><a href="#contact">Link3</a></li>
        <li><a href="#contact">Link4</a></li>
        <li><a href="#contact">Link5</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

.navbar .navbar-nav li a{
  color:white !important;
}
.navbar-nav li.active:before{
  /*padding-top: 20px;*/
  /*height:60px;*/
   content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    height: 5px;
    border: 10px transparent solid;
    border-top-color: #990033;
    border-left-width: 0;
    border-right-width: 0;
}
.navbar-nav li.active:after{

  content: '';
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    height: 5px;
    border: 10px transparent solid;
    border-top-color: #990033;
    border-left-width: 0;
    border-right-width: 0;
}
.navbar-nav li:not(.active):hover:before{
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    height: 5px;
    border: 10px transparent solid;
    border-top-color: rgba(0,85,140,0.4);
    border-left-width: 0;
    border-right-width: 0;
}
.navbar-nav li:not(.active):hover:after{
  content: '';
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    height: 5px;
    border: 10px transparent solid;
    border-top-color: rgba(0,85,140,0.4);
    border-left-width: 0;
    border-right-width: 0;
}
/*override bootstrap*/
.navbar-default{
  background-color: white;
  border-color: transparent;
  margin-top:15px;
}
.navbar-nav > li > a {
  padding-top:10px !important; 
  padding-bottom:10px !important;
}
.navbar {
  min-height:40px !important;
}
.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
  background-color:#FF671F;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.7);
  padding:0 60px 0 60px;
  width: 100%;
}
.navbar .navbar-collapse {
  text-align: center;
}
.navbar-nav li.active a{
  background-color: #990033 !important;
}
.navbar-default .navbar-nav>li>a:hover{
  background-color: rgba(0,85,140,0.4);
}

结果:CodePen

我该怎么做？谢谢

Answer 1

注意:NOT 不会随高度改变自身!高度硬编码，谨慎使用；高度可调； 如果需要，使用JS动态调整高度和平移

.nav {
  margin-top: 30px;
  height: 20px;
  background-color: orange;
}
.nav-item {
  margin: -10px 0 0 30px;
  display:inline-block;
  padding:10px;
  color: white;
  background-color: #AA0000;
  position: relative;
  font-family: "Helvetica";
  box-shadow: 3px 2px 5px 0 rgba(0,0,0,0.4)
}
.nav-item:before {
  position: absolute;
  top: 0; left:-10px ; bottom:0;
  display: inline-block;
  content: '';
  border-top: 10px solid #770000;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
  transform: translateY(28px);
}

.nav-item:after {
  position: absolute;
  top: 0; left:-10px ; bottom:0;
  display: inline-block;
  content: '';
  border-top: 10px solid #440000;
  border-bottom: 10px solid transparent;
  border-right: 10px solid transparent;
  transform: rotate(180deg) translateY(28px);
}

<div class="nav">
  <div class="nav-item">zeke</div>
  <div class="nav-item">dran</div>
<div>