JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

  <body>

    <!-- Static navbar -->
    <nav class="navbar navbar-default navbar-static-top">
      <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>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse"><!--
            --><div class="rhombus purple-bg"></div><!--
            --><div class="rhombus red-bg"></div><!--
            --><div class="rhombus blue-bg"></div>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

  </body>

CSS

.rhombus{
            height:45px;
            width: 35px;
            -webkit-transform: skew(-20deg);
            -moz-transform: skew(-20deg);
            -o-transform: skew(-20deg);
            display: inline-block;
            margin:0px;
            padding:0px;
        }
        .purple-bg {
            background: #903a67;;
        }
        .red-bg {
            background: red;;
        }
        .blue-bg {
            background: blue;
        }