<section class="timeline">
  <div class="timeline__items">
    <svg class="timeline__bg bg">
      <defs>
        <clipPath id="clip-first">
          <rect x="50%" y="-10%" width="60%" height="120%" />
          <rect x="25" y="-10%" width="50%" height="20%" />
        </clipPath>
        <clipPath id="clip-left">
          <rect x="-10%" y="-10%" width="60%" height="120%" />
        </clipPath>
        <clipPath id="clip-right">
          <rect x="50%" y="-10%" width="60%" height="120%" />
        </clipPath>
        <clipPath id="clip-last">
          <rect x="-10%" y="-10%" width="60%" height="120%" />
          <rect x="50%" y="90%" width="50%" height="20%" transform="translate(-25 0)" />
        </clipPath>
      </defs>

      <g class="bg__lines">
        <rect y="0%" width="100%" height="25%" rx="25" clip-path="url(#clip-first)" />
        <rect y="25%" width="100%" height="25%" rx="25" clip-path="url(#clip-left)" />
        <rect y="50%" width="100%" height="25%" rx="25" clip-path="url(#clip-right)" />
        <rect y="75%" width="100%" height="25%" rx="25" clip-path="url(#clip-last)" />
      </g>
    </svg>

    <div class="timeline__item">
      <img class="timeline__image" src="//placehold.it/200x100/cccccc?text=1" alt="">
      <div class="timeline__text">Lorem ipsum, dolor sit amet</div>
    </div>
    <div class="timeline__item">
      <img class="timeline__image" src="//placehold.it/200x100/cccccc?text=2" alt="">
      <div class="timeline__text">Dolore libero pariatur</div>
    </div>
    <div class="timeline__item">
      <img class="timeline__image" src="//placehold.it/200x100/cccccc?text=3" alt="">
      <div class="timeline__text">Quasi qui nam pariatur nisi odio</div>
    </div>
    <div class="timeline__item">
      <img class="timeline__image" src="//placehold.it/200x100/cccccc?text=4" alt="">
      <div class="timeline__text">Commodi nemo aperiam id nulla natus</div>
    </div>
    <div class="timeline__item">
      <img class="timeline__image" src="//placehold.it/200x100/cccccc?text=5" alt="">
      <div class="timeline__text">Fugit ex quod nesciunt</div>
    </div>
    <div class="timeline__item">
      <img class="timeline__image" src="//placehold.it/200x100/cccccc?text=6" alt="">
      <div class="timeline__text">Obcaecati, provident</div>
    </div>
    <div class="timeline__item">
      <img class="timeline__image" src="//placehold.it/300x100/cccccc?text=7" alt="">
      <div class="timeline__text">Tenetur officiis esse ducimus</div>
    </div>
    <div class="timeline__item">
      <img class="timeline__image" src="//placehold.it/300x100/cccccc?text=8" alt="">
      <div class="timeline__text">Fugiat, et ex deserunt expedita</div>
    </div>
  </div>
</section>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.timeline {
  width: calc(100% - 100px);
  margin: 0 auto;
}

.timeline__items {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding: 0 25px;
  z-index: 0;
}

.timeline__item {
  display: flex;
  justify-content: center;
  position: relative;
  width: 40%;
  padding: 10px 15px 50px;
}

.timeline__item:nth-of-type(4n - 1) {
  margin-left: auto;
}

.timeline__item:nth-of-type(7),
.timeline__item:nth-of-type(8) {
  width: 100%;
  margin: 0;
}

.timeline__bg {
  position: absolute;
  top: calc(20% - 52px);
  left: 0;
  width: 100%;
  height: 80%;
  z-index: -1;
}

.timeline__image {
  display: block;
  height: 100px;
  width: 100%;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0.75;
}

.timeline__text {
  position: absolute;
  top: calc(100% - 40px);
  left: 15px;
  right: 15px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bg {
  display: block;
  overflow: visible;
}

.bg__lines {
  stroke: orangered;
  stroke-width: 4px;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 8px 12px;
}