<div class="box red skewy-45deg pos">

</div>

<div class="box green skewy-45deg">

</div>

body {

  display: flex;

  align-items: center;

  justify-content: center;

​

  height: 100vh;

  margin: 0;

  overflow: hidden;

​

  font-family: sans-serif;

}

​

.box {

  box-sizing: border-box;

  width: 300px;

  margin-right: 20px;

  padding: 20px;

​

  color: #fff;

}

​

.red {

  background: #ef5350;

}

​

.green {

  background: #66bb6a;

}

​

.blue {

  background: #42a5f5;

}

​

.skewy-45deg {

  transform: skewY(45deg);

}

​

.skewy-minus45deg {

  transform: skewY(-45deg);

}

​

.pos {

  position: relative;

  animation: animation 5s infinite;

}

​

.pos::before {

  content: "";

  height: 200px;

  width: 1px;

  background: #000;

  position: absolute;

  left: 0;

  top: -50px;

}

​

.pos::after {

    content: "";

    height: 200px;

    width: 1px;

    background: #000;

    position: absolute;

    right: 0;

    top: -50px;

}

​

@keyframes animation {

  0% {

    left: 320px;

  }

  50% {

    left: 0px;

    transform: skewY(45deg);

  }

  100% {

    transform: skewY(0deg);

  }

}