Clipped Corner Div with a Separate Linear Gradient - css

Question

Instead of falling back on SVG, I'd love to accomplish this with pure CSS.
There are a number of tutorials on clipped edges using a series of Linear Gradients, i.e.
background: linear-gradient(135deg, transparent 15px, blue 0) top left,
linear-gradient(-135deg, transparent 15px, blue 0) top right,
linear-gradient(-45deg, transparent 15px, blue 0) bottom right,
linear-gradient(45deg, transparent 15px, blue0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
And a diagonal "linear gradient" can also be accomplished quite easily, i.e.
background: linear-gradient(290deg, blue 50%, darkblue 50%);
Is there a way to combine these two techniques to get something like the box pictured below?
Edit: Internet Explorer compatibility would be great.
-webkit-clip-path
clip-path
Are not IE compatible to my knowledge.

Answer 1

You can define one transparent corner via background gradient. However, when you declare more than one, they paint over the transparency defined by the previous rule. In essence, they paint over each other.
A better solution is to use clip-path. For simple shapes, you can use clippy.
body {
background: black;
}
#gradients {
width: 200px;
height: 50px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0) 15px, rgba(255, 0, 0, 1) 0) top left, linear-gradient(-135deg, rgba(255, 255, 255, 0) 15px, rgba(255, 0, 0, 1) 0) top right, linear-gradient(-45deg, rgba(255, 255, 255, 0) 15px, rgba(255, 0, 0, 1) 0) bottom right, linear-gradient(45deg, rgba(255, 255, 255, 0) 15px, blue) bottom left;
}
#gradientsPaintover {
margin: 30px 0 0 0;
width: 200px;
height: 50px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0) 15px, rgba(0, 255, 0, 0.4) 0) top left, linear-gradient(-135deg, rgba(255, 255, 255, 0) 15px, rgba(0, 0, 255, 1) 0) top right;
}
#clip {
background: red;
margin: 30px 0 0 0;
width: 200px;
height: 50px;
-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}
<div id="gradients"></div>
<div id="gradientsPaintover"></div>
<div id="clip"></div>

Answer 2

Serg's answer was helpful in solving the problem, but I thought'd I'd post a complete solution.
background: linear-gradient(290deg, blue 50%, darkblue 50%);
-webkit-clip-path: polygon(5% 0, 95% 0, 100% 10%, 100% 90%, 95% 100%, 5% 100%, 0 90%, 0 10%);
clip-path: polygon(5% 0, 95% 0, 100% 10%, 100% 90%, 95% 100%, 5% 100%, 0 90%, 0 10%);
A note that this will not work at all in IE and you should pursue the SVG option in that case.
Edit: spending some more time with this, there's no reason you couldn't create pseudo elements before and after your div that contains a linear-gradient to add the 'cut edge' look.
See codepen here or CSS below.
/*div and interior BG*/
div {
width: 80%;
height: 300px; /*Make sure your content has a height specified*/
display: inline-block;
background: linear-gradient(290deg, blue 50%, darkblue 50%);
position: relative;
margin-left: 10%;
}
/*Shared styles across pseudo elements*/
div:before, div:after {
content: '';
width: 20%;
min-height: 300px; /*Fits psuedo element height to content*/
position: absolute;
display:inline-block;
}
/*Position and cuts for left side*/
div:before {
left: -9.9%;
background: linear-gradient(135deg, transparent 15px, darkblue 0) top left,
linear-gradient(45deg, transparent 15px, darkblue 0) bottom left;
background-size: 100% 51%;
background-repeat: no-repeat;
}
/*Position and cuts for left right*/
div:after {
right: -9.9%;
background:
linear-gradient(-135deg, transparent 15px, blue 0) top right,
linear-gradient(-45deg, transparent 15px, blue 0) bottom right;
background-size: 100% 51%;
background-repeat: no-repeat;
}