Как исказить div и убедиться, что ширина всегда составляет 50%?

Question

Я изо всех сил пытаюсь исказить деление, как показано на рисунке ниже ... при этом нижняя и верхняя части всегда покрывают 50% ширины экрана, если это имеет смысл.

Я приложил изображение для получения дополнительной информации

РЕДАКТИРОВАТЬ: это изображение в фотошопе, и я пытаюсь воссоздать его с помощью CSS.

Answer 1

Я не уверен насчет варианта использования, но вы можете восстановить его, используя 2 linear-gradient.Каждый из них будет иметь форму треугольника и будет покрывать половину контейнера.

body {
  margin: 0;
}

.container {
  height: 200px;
  background:
    linear-gradient(to top left, blue 50%,transparent 50.5%) left/50% 100% no-repeat,
    linear-gradient(to bottom right, blue 50%,transparent 50.5%) right/50.5% 100% no-repeat;
}

<div class="container">
</div>