모서리가 깎인 상자

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>

는 불행하게도 에지 지원 이없는 나는 상자 그림자을 사용할 수 없습니다 : 여기에 지금까지 무슨이다. 이것을 이루기위한 다른 방법이 있습니까?

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>