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

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

＆＃13;

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

＆＃13;

<div class="box"></div>

＆＃13;

盒子与修剪角落

1 个答案: