带剪角的盒子

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>

不幸的是不支持边缘而且我不能使用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>

带剪角的盒子

Box with clipped corners

html

css

css-shapes