带修剪角落的方框

我需要一个带有所有修剪角落的方框。这是我到目前为止有：带修剪角落的方框

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。有没有另外一种方法来完成这个？

来源

2017-05-16 ExrowGe

关于使用什么['边框radius'（https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius）？没有那么多的控制，但会剪辑。 – zero298

我们可以做一些使用溢出隐藏和旋转伪元素？

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

来源

2017-05-16 21:36:59

谢谢。很棒。 ^^ – ExrowGe

带修剪角落的方框

回答

相关问题