带剪角的盒子

Question

我需要一个带有所有剪角的盒子。到目前为止，这是我所拥有的：

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>

很遗憾，没有 Edge 支持，我不能使用 box-shadow。有没有其他方法可以做到这一点？

Answer 1

我们可以使用溢出隐藏和旋转的伪元素来做点什么吗？

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