Create a ribbon header responsive in bootstrap

Question

how I can create a ribbon header in bootstrap and i need to be responsive, the best way will be if this header will be split in 2 parts, i mean left and right, the ribbon must look like this:

my code is:

 .ribbon {
   font-size: 16px !important;
   /* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */
   width: 75%;
   position: relative;
   background-color: #fafafa;
   background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
   background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
   background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
   background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
   background-repeat: repeat-x;
   filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
   border: 1px solid #d4d4d4;
   color: #fff;
   text-align: center;
   padding: 1em 2em;
   /* Adjust to suit */
   margin: 2em auto 3em;
   /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
 }
 .ribbon:before,
 .ribbon:after {
   content: "";
   position: absolute;
   display: block;
   bottom: -1em;
   border: 1.5em solid #f2f2f2;
   /*side ribbons*/
   z-index: -1;
 }
 .ribbon:before {
   left: -2em;
   border-right-width: 1.5em;
   border-left-color: transparent;
 }
 .ribbon:after {
   right: -2em;
   border-left-width: 1.5em;
   border-right-color: transparent;
 }
 .ribbon .ribbon-content:before,
 .ribbon .ribbon-content:after {
   content: "";
   position: absolute;
   display: block;
   border-style: solid;
   border-color: #e2e2e2 transparent transparent transparent;
   bottom: -1em;
 }
 .ribbon .ribbon-content:before {
   left: 0;
   border-width: 1em 0 0 1em;
 }
 .ribbon .ribbon-content:after {
   right: 0;
   border-width: 1em 1em 0 0;
 }

<div class="navbar ribbon">
  <div class="navbar-inner ribbon-content">
    <div class="container">
      <ul class="nav">
        <li class="active"><a href="#">Home</a>
        </li>
        <li><a href="#">Projects</a>
        </li>
        <li><a href="#">Services</a>
        </li>
        <li><a href="#">Downloads</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</div>
<!-- /.navbar -->

Thank you

Answer 1

I've made this quickly using pseudo element and css triangles. Maybe it can inspire you

body {
  background-color: white;
}
header {
  position: relative;
  background-color: blue;
  color: white;
  text-align: center;
  width: 95%;
  height: 40px;
}
header::before,
header::after {
  content: '';
  display: block;
  position: absolute;
}
header::before {
  height: 40px;
  width: 50px;
  right: -30px;
  top: 4px;
  background-color: darkblue;
  z-index: -1;
}
header::after {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 20px 20px 0;
  border-color: transparent white transparent transparent;
  right: -30px;
  top: 4px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-12 header">
    <header>
      <h1>Header</h1>
    </header>
  </div>
</div>

Answer 2

In order to achieve this, you would need to use a few elements (including pseudos) in order to create a few of the shapes you have there:

.wrapper {
  margin: 0 auto;
  height: 400px;
  width: 400px;
  background: lightgray;
  position: relative;
  /*needed*/
}
.banner {
  position: absolute;
  top: 5px;
  left: 0;
  width: 105%;
  height: 20%;
  background: cornflowerblue;
}
.banner:before {
  content: "";
  position: absolute;
  height: 100%;
  right: 0;
  width: 5%;
  top: 0;
  transform: skewY(-20deg);
  transform-origin: top right;
  background: blue;
  z-index: -1;
}
.banner:after {
  content: "";
  position: absolute;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 90%;
  width: 100%;
  border: 2px dashed black;
  border-left: none;
  border-right: none;
  top: 5%;
  left: 0;
}
.banner span {
  position: absolute;
  top: 10%;
  left: 100%;
  height: 50%;
  width: 10%;
  background: tomato;
  z-index: -2;
}
.banner span:before {
  content: "";
  position: absolute;
  top: 100%;
  left: -150%;
  height: 100%;
  width: 300%;
  background: red;
  transform: skewX(45deg);
  z-index: -2;
}
.banner span:after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  height: 100%;
  width: 300%;
  background: red;
  transform: skewX(-45deg);
  z-index: -2;
}

<div class="wrapper">
  <div class="banner">
    <span></span>
  </div>
</div>