How to create a responsive div in cone shape - css

Question

does anyone knows a way to create a div with responsive width in shape of an inverted cone (see attached code snippet) only using css. Also this div needs to have a repeated background image (pattern).
I tried to use clipPath:
#div {
height: 100%;
width: 100%;
-webkit-clip-path: polygon(50% 90px, 100% 0%, 100% 100%, 0 100%, 0 0);
clip-path: polygon(50% 25%, 100% 0, 100% 100%, 0 100%, 0 0);
background: blue;
padding-top: 160px;
}
<div id="div"></div>
This works fine in Safari and Chrome but won't work in Mozilla, Opera or IE.
Is there a way to achieve for all relevant browsers?
Any help would be appreciated.

Answer 1

Use linear-gradient with side or corner values instead of fixed angles. You can make that shape with transforms too, but that'll require JS to make it responsive.
Fiddle
body {
background-color: blue;
margin: 0;
padding: 0;
}
div {
height: 150px;
width: 100%;
position: relative;
}
div:after, div:before {
content:"";
position: absolute;
height: inherit;
width: 50%;
}
div:before {
left: 0;
background: -webkit-linear-gradient(to bottom left, white 50%, transparent 50%);
background: -moz-linear-gradient(to bottom left, white 50%, transparent 50%);
background: -o-linear-gradient(to bottom left, white 50%, transparent 50%);
background: linear-gradient(to bottom left, white 50%, transparent 50%);
}
div:after {
right: 0;
background: -webkit-linear-gradient(to bottom right, white 50%, transparent 50%);
background: -moz-linear-gradient(to bottom right, white 50%, transparent 50%);
background: -o-linear-gradient(to bottom right, white 50%, transparent 50%);
background: linear-gradient(to bottom right, white 50%, transparent 50%);
}
<div></div>

Answer 2

You can set the div to have overflow hidden, and then set 2 pseudo elements with skew, one for each half
.test {
width: 400px;
height: 300px;
overflow: hidden;
position: relative;
}
.test:after, .test:before {
content: "";
position: absolute;
top: 0px;
width: 50%;
height: 100%;
}
.test:before {
left: 0px;
transform: skewY(15deg);
transform-origin: top left;
background: repeating-linear-gradient(-15deg, white 0px, lightblue 40px);
}
.test:after {
right: 0px;
transform: skewY(-15deg);
transform-origin: top right;
background: repeating-linear-gradient(15deg, white 0px, lightblue 40px);
}
<div class="test"></div>