如何倾斜 div 并确保宽度始终为 50%？

Question

我正在努力使 div 像下图那样倾斜...如果有意义的话，底部和顶部总是覆盖屏幕宽度的 50%。

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

编辑：这是一张 photoshop 图片，我正在尝试用 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>

如何倾斜 div 并确保宽度始终为 50%？

How to skew a div and ensure that the width is always 50%?

css

skew