Box With Clipped Corners

I need a box with all clipped corners. Here's what I have so far: Unfortunately there is no Edge support and I can't use box-shadow. Is there another way to accomplish this?

Solution 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);
}

<divclass="box"></div>