HR divider with coloured boxes with sides under an 16 degrees angle

Question

I created a HR divider consisting of several coloured boxed which animate on hover, as shown on this CodePen. Now I want to add 16 degrees angles to the sides of these boxes except for the outermost two sides. Similar to the boxes in this image

I tried clip-path, but it leaves white space between adjacent boxes. I'm stuck in a moment and I can't get out of it. Can anyone give me pointers to tackle this problem?

I use the following CSS code to create the hr divider with hover animation:

.box {
  display: flex;
  width: 100%;
  height: 8px;
  margin: 5px 0px 60px 0px;
}

.box-sm {
  height: 15px;
  margin: 0;
  flex-grow: 1;
  transition: all .8s ease-in-out;
  cursor: pointer;
}

/*Growing the width of box, when hover using flex-grow property*/
.box-sm:hover {
  flex-grow: 12;
}

.bluewh1 {
  background-color: #4594d3;
}

.bluewh2 {
  background-color: #1ebcc5;
}

.bluewh3 {
  background-color: #84d0d9;
}

In the HTML file the divider is added as follows:

<div class="box drop-shadow2">
   <div class="box-sm bluewh1"></div>
   <div class="box-sm bluewh2"></div>
   <div class="box-sm bluewh3"></div>
   <div class="box-sm bluewh2"></div>
   <div class="box-sm bluewh1"></div>
</div>