Float 2 side-by-side with triangular tip

Question

This is a tough one, and I’ll explain why, I have two Ivs like in the print below, the site is responsive, they should float side by side, but these Ivs have triangular tips, and they should scale horizontally until I determine a breakpoint, in this case, the red color div on small screens Xs: 320px would have 100% width and the second I would hide. but on large screens lg: 1200px, would have to look the way it is in the print, but I don’t want it to break if the monitor is a little less than 1200.

I’ve tried a few ways here but the dark block always breaks.

I would like suggestions.

Look at the code I made: http://codepen.io/leandroruel/pen/OyJErX

Answer 1

I’ll post as an answer but I don’t know if you want the white block to be hidden or to the right of the red block so anything you tell me below that I edit the answer

<style>
    body {
  padding: 0;
  margin: 0;
  background: #242424;
}

.container {
  max-width: 980px;
  margin: 0 auto;
}

.banner {
  background: url(http://www.citygop.org/wp-content/uploads/2015/02/city-wallpaper-7.jpg) no-repeat 0 50%;
  height: 400px;
  position: relative;
}

.banner-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.banner-title {
  display: inline-block;
  height: 55px;
  background: #F64444;
  font-family: arial, sans-serif;
  font-size: 15px;
  color: #fff;
  text-transform: uppercase;
  text-align: right;
  padding: 15px 15px;
  box-sizing: border-box;
  position: relative;
}

.banner-title:before {
  content: '';
  display: block;
  height: 100%;
  width: 500%; /* i hate it */
  position: absolute;
  top: 0;
  left: -500%;
  background: #f64444;
}

.banner-title:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
  border-width: 55px 60px 0 0;
  border-style: solid;
  border-color: #f64444 transparent;
  position: absolute;
  top: 0;
  right: -60px;
}



.banner-title02:before {
    border-color: white transparent;
    border-style: solid;
    border-width: 0 0 55px 60px;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    right: 129px;
    top: 0;
    width: 0;
}
.banner-title02 {
  color: black;
  display: inline-block;
  height: 55px;
  background: white;
  font-family: arial, sans-serif;
  font-size: 15px;  
  text-transform: uppercase;
  text-align: right;
  padding: 15px 15px;
  box-sizing: border-box;
  position: relative;
  right: -57px;
}
.banner-title02:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
  border-width: 55px 60px 0 0;
  border-style: solid;
  border-color: white transparent;
  position: absolute;
  top: 0;
  right: -60px;
}



.banner-title03::before {
    border-color: #5e3633 transparent;
    border-style: solid;
    border-width: 0 0 114px 120px;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    right: 603px;
    top: -9px;
    width: 4px;
}
.banner-title03 {
    background: #5e3633 none repeat scroll 0 0;
    box-sizing: border-box;
    color: white;
    display: inline-block;
    font-family: arial,sans-serif;
    font-size: 11px;
    height: 105px;
    padding: 15px;
    position: relative;
    right: -112px;
    text-align: left;
    text-transform: uppercase;
    top: -4px;
    width: 63%;
}


@media screen and (max-width: 980px) {
  .banner-title, .container { width: 100%; }  
  .banner-title:before, .banner-title:after { display: none; }
  .banner-title02:before, .banner-title02, .banner-title02:after { display: none; }
  .banner-title03:before, .banner-title03 { display: none; }
}
</style>
<div class="banner">
  <div class="banner-header">
    <div class="container">
        <div class="banner-title">products</div>        
        <div class="banner-title02">Linha Racing</div>
        <div class="banner-title03">Terceiro bloco Coloque seu texto aqui</div>
    </div>
      
  </div>
</div>

Here on the site it does not open the desirable size so I gave a Fork in your codepen and did another

Edit: I updated the codepen