I'm currently stuck with a problem in my bootstrap navbar menu. I want to achieve a "ribbon" effect similar to the image below:
https://i.sstatic.net/ROftS.png
I have tried using :after and :before properties on two elements, but I'm struggling to create the triangles in the left part.
Here is my code and a link to the CodePen for reference:
<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{
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;
}
... (additional CSS styles)
Check out the result here: CodePen
Any suggestions on how to achieve this effect? Thank you!