Блог

 .blocks {
  display: flex;
  width: 100%;
  height: 50px;
}

.blocks .block {
  flex: 0 0 25%;
  background-color: blue;
  position: relative;
  display: flex;
}

.blocks .block a {
  
  padding-left: 30px; /* so the triangle doesnt overlap the text */
  color: white;
  margin: auto 0;
}

/* not(:last-child) so the last one will not have the triangle */
.blocks .block:not(:last-child)::after {
  content:"";
  position:absolute;
  border-left:15px solid blue; /*This is your color of the arrow*/
  border-top:25px solid transparent; /*half the height (50px)*/
  border-bottom:25px solid transparent; /*half the height (50px)*/
  right:-15px; /*we want it on far right and overlapping the next block*/
  top:0;
  z-index: 1;
}

/* 2n selector selects every second element so you can have diffrent colors automaticly */
.blocks .block:nth-of-type(2n) {
  background-color: green;
}

.blocks .block:nth-of-type(2n)::after {
  border-left:15px solid green;
}  

 <div class="container">
  <section class="blocks">
    <div class="block">
      <a href="#">
        Block1
      </a>
    </div>
    <div class="block">
      <a href="#">
        Block2
      </a>
    </div>
    <div class="block">
      <a href="#">
        Block3
      </a>
    </div>
    <div class="block">
      <a href="#">
        Block4
      </a>
    </div>
  </section>
</div>