Skew в градиенте

как можно реализовать такой top-line? я так понимаю градиентом, но не могу понять, как исказить по середине

.top-line {
  min-height: 40px;
  width: 100%;
  background: linear-gradient(to right, green 50%, red 50%);
}

<div class="top-line"></div>