Bootstrap Navbar

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar" role="navigation">
    <ul class="nav navbar-nav pull-right">
      <li class="active"><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
</nav>

SCSS

.navbar {
    background: red;
    border: 0
    .nav {
        float: right;
        padding-right: 50px;
        background: #2cb6ad;
        li {
            float: left;
            a {
                color: white;             
            }
        }
        &:before {
            content: '';
            float: left;
            margin-left: -30px;
            width: 0;
            height: 0;
            border-bottom: 50px solid #2cb6ad;
            border-left: 29px solid transparent;
            border-right: 29px solid transparent;
        }
    }
}