Javascript-форум - Не работает z-index

Хочу сделать треугольник с помощью 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>