How to draw polygon background with CSS?

Question

I have the page which is full of content.

There is a polygon which I want to set as a background for the whole page with color #E0E6E5.

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

How can I do this?

I know that it sounds very simple. But I was unable to do it with clip-path which basically cuts off the other half of the page and makes is non-visible. A static image is not an option.

Is there any other option that I am missing?

Answer 1

The shape you want is this:

.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>

You can easily do it with gradient and multiple background:

.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>