<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="top-bar"> <div class="container"> <div class="row"> <div class="col-md-9 col-sm-12 offset-md-2 col-sm-offset-0 col-xs-offset-0 top-bar-curve"> </div> </div> </div> </div>

.top-bar { border-top: 4px solid #2369C1; background-color: #fff; } .top-bar-curve { position: relative; z-index: 2; min-height: 40px; } .top-bar-curve:after { background-color: #2369C1; position: absolute; top: 0; left: 0; width: 1200px; height: 100%; content: ""; z-index: -1; -moz-transform: skewX(35deg); -o-transform: skewX(35deg); -ms-transform: skewX(35deg); transform: skewX(35deg); }