Почему серый квадрат не закрывает черного?
#box {
z-index: 1; // <-- если убрать то всё заработает
margin: 50px;
background: #ccc;
width: 200px;
height: 100px;
position: absolute;
border-radius: 5px;
margin-top: 30px;
}
#box::before, #box::after {
display: block;
content: "";
position: absolute;
width: 20px;
height: 20px;
top: -10px;
left: 80px;
transform: rotate(45deg);
background: #333;
}
#box::before {
z-index: -1;
}
#box::after {
z-index: -1;
}
<div id="box"></div>
z-index
выше нуля то его закрывают другие объекты