Box with clipped corners - html

Question

I need a box with all clipped corners. Here's what I have so far:
body {
height: 200px;
background: -webkit-linear-gradient(left, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
background: -o-linear-gradient(right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
background: -moz-linear-gradient(right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}
#block {
width: 330px;
height: 200px;
margin-left: 20%;
background-color: #222;
-webkit-clip-path: polygon(4% 0, 96% 0, 100% 9%, 100% 90%, 96% 100%, 4% 100%, 0 90%, 0 10%);
clip-path: polygon(4% 0, 96% 0, 100% 9%, 100% 90%, 96% 100%, 4% 100%, 0 90%, 0 10%)
}
<div id="block"></div>
Unfortunately there is no Edge support and I can't use box-shadow. Is there another way to accomplish this?

Answer 1

Could we do something using overflow hidden and a rotated pseudo element?
.box{
width:100px;
height:100px;
position:relative;
overflow:hidden;
}
.box:after{
content: '';
width:120px;
height:120px;
position:absolute;
background:#465;
left:50%;
top:50%;
transform:translateX(-50%) translateY(-50%) rotateZ(45deg);
}
<div class="box"></div>