Хочу сделать треугольник с помощью css, все окей, вот только тень от него не скрывается, не понимаю почему, ведь position для z-index вроде задан
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
.address{
border-radius: 4px;
width: 323px;
height: 176px;
box-shadow: 0 0 3px black;
position: relative;
}
.address p:nth-child(1){
font-family: "Open Sans Light";
font-size: 30px;
color: #797979;
padding-top: 15px;
margin-left: 25px;
}
.address p:nth-child(2){
font-family: "Open Sans";
font-size: 14px;
color: #8d8d8d;
margin-left: 25px;
margin-top: -23px;
}
.address::after, .address::before{
content: "";
position: absolute;
background: #fff;
width: 200px;
height: 153px;
left: 149px;
top: 99px;
transform: rotate3d(1, 0, 1, 227deg);
box-shadow: 0 0 7px black;
z-index: -1;
}
.address::before{
box-shadow: none;
z-index: 1;
}
</style>
<div class="address">
<p>Address</p>
<p>Web Design and Development Division <br> 2nd Floor ,SA Tower <br> Kollam <br> Kerala, India</p>
</div>
</body>
</html>