Question

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

有一个我要设置为整个页面背景的多边形，颜色为＃E0E6E5。

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

我该怎么做？

我知道这听起来很简单。但是我无法使用clip-path来实现，它基本上切断了页面的另一半并使它不可见。不能使用静态图片。

我还有其他选择吗？

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>

Answer 2

您可以将SVG用作背景图像。示例：

background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'><polygon%20points='220,10%20300,210%20170,250%20123,234'%20style='fill:#E0E6E5;stroke:purple;stroke-width:1'%20/></svg>");

Here's a JSFiddle to demonstrate。

有关更多详细信息，请参阅：

SVG Polygon @ W3Schools
SVG in background-image

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

2 个答案: