如何扭曲div并确保宽度始终为50％？

Question

我正在努力歪曲像下图所示的div ...如果有意义的话，底部和顶部总是占据屏幕宽度的50％。

我附上了一张图片以获取更多信息

编辑：这是一个Photoshop图片，我试图用CSS重新创建它。

Answer 1

我不确定用例，但您可以使用2 linear-gradient重新创建此用例。每个都有一个三角形形状，将覆盖容器的一半。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;