如何使用 CSS 绘制多边形背景？

Question

我有一个充满内容的页面。

有一个多边形，我想将其设置为整个页面的背景，颜色为 #E0E6E5。

polygon(0 0, 100% 35%, 100% 65%, 0% 100%)

我怎样才能做到这一点？

我知道这听起来很简单。但是我无法使用剪辑路径来完成它，它基本上切断了页面的另一半并使页面不可见。静态图像不是一种选择。

我还缺少其他选项吗？

Answer 1

你想要的形状是这样的：

.box {
 -webkit-clip-path:polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
 clip-path:polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
 width:200px;
 height:200px;
 background:#E0E6E5;
}

<div class="box"></div>

您可以使用渐变和多个背景轻松完成：

.box {
 width:200px;
 height:200px;
 background:
   linear-gradient(to bottom left,transparent 49.8%,#E0E6E5 50%) top   /100% 35%,
   linear-gradient(to top    left,transparent 49.8%,#E0E6E5 50%) bottom/100% 35%,
   linear-gradient(#E0E6E5,#E0E6E5) center/100% 30%;
 background-repeat:no-repeat;
}

<div class="box"></div>