角のついた箱

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>