<ul class="list">
  <li class="list__item"></li>
  <li class="list__item"></li>
  <li class="list__item"></li>
</ul>

* {
  box-sizing: border-box;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

$total: 3;
$overlap: 0px;
$grad: linear-gradient(90deg, #0a6580, #33b7cc, #b7d64d, #f3ae35, #e04c4c, #9f397a);

.list {
  display: flex;
  padding: 0 #{$overlap / 2};
  height: 200px;
}

.list__item {
  width: calc(#{100% / $total} + #{$overlap});
  margin: 0 #{-$overlap / 2};
  background-image: $grad;
  background-repeat: no-repeat;
  outline: 1px dashed gray;
  
  @for $i from 1 through $total {
    &:nth-child(#{$i}) {
      background-position: calc((100% / #{$total - 1} * #{$i - 1})) 0;
      background-size: calc(#{100% * $total} - #{($total - 1) * $overlap}) 100%;
    }
  }
}