Blocks with arrows

gistfile1.txt

<div class="wrapper">
  <div class="outer-bottom-arrow"></div>
  <div class="inner-top-arrow">
    <div class="left-block"></div>
    <div class="right-block"></div>
  </div>
</div>

.wrapper{
  position: relative;
  width:500px;
  height: 200px;
  background-color: green;
}
.outer-bottom-arrow{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background-color: #0a1631;
}
.outer-bottom-arrow:after {
  content: ' ';
  height: 0;
  position: absolute;
  width: 0;
  top: 100%;
  left: 48%;

  border-left: 26px solid transparent;
  border-right: 26px solid transparent;
  
  border-top: 14px solid  #0a1631;
}

.inner-top-arrow{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 14px;
  background-color: transparent;
  border-bottom: 11px solid red;
  box-sizing: content-box;
}
.inner-top-arrow .left-block{
  width: 40%;
  float: left;
  border-left: 0 solid transparent;
  border-right: 26px solid transparent;
  border-bottom: 14px solid red;
}
.inner-top-arrow .right-block{
  width: 40%;
  float: left;
  border-left: 26px solid transparent;
  border-right: 0 solid transparent;
  border-bottom: 14px solid red;
}