z-index problem with css and wordpress themes

Hi everyone,
i was trying to adapt this code: the 100% post-it note to use it into a wordpress page.
The problem is i’m not able to see the dropshadow in the bottom-right corner. I guess it’s something related to z-index property.
If i use the same code into a static html page (not a wordpress page), everything is working fine. I’ve tryed to use Twenty-Eleven theme, and Boot-Store theme, and with both themes i’m not able to show the dropshadow. Strange thing happens when i’ll add a rotation to the .postit css rule: the dropshadow is correctly rendered on firefox, but not in chrome or IE… I guess there is something in the style.css of these themes, but i can’t find what.
Any help or suggestions, please? Thank you in advance!

This is the html code i’m using as example:

<ul>
	<li class="postit">
		<div class="a"> date here</div>
		<div class="b">title here</div>
		<hr class="c" />
		<div class="d">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
	</li>
</ul>

and this is the css i’ve used:

.postit {
	padding:20px;
	text-align:center;
	width: 300px;
	margin: 25px;
	min-height:175px;
	position:relative;
	border:1px solid #E8E8E8;
	border-bottom-right-radius: 60px 5px;
	display:inline-table;
	background: rgb(255,255,136); /* Old browsers */
	background: -moz-linear-gradient(135deg, rgba(255,255,136,1) 77%, rgba(255,255,214,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, right bottom, left top, color-stop(77%,rgba(255,255,136,1)), color-stop(100%,rgba(255,255,214,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(135deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(135deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(135deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* IE10+ */
	background: linear-gradient(135deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffff88',GradientType=0 ); /* IE6-9 fallback on horizontal gradient */
}

.postit:after {
   content: "";
	position:absolute;
	z-index:-1;
	right:-0px; bottom:20px;
	width:200px;
	height: 25px;
	background: rgba(0, 0, 0, 0.2);
	box-shadow:2px 15px 5px rgba(0, 0, 0, 0.40);
	-moz-transform: matrix(-1, -0.1, 0, 1, 0, 0);
	-webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0);
	-o-transform: matrix(-1, -0.1, 0, 1, 0, 0);
	-ms-transform: matrix(-1, -0.1, 0, 1, 0, 0);
	transform: matrix(-1, -0.1, 0, 1, 0, 0);
}

.a {
	text-align:center;
	margin:0px 0px 5px;
	font-size:16px;
}
.b {
	text-align:center;
	margin:0px 0px 5px;
	font-weight:bold;
	font-size:18px;
}
.c {
	color:#595959;
	background-color:#595959;
	border:none;
	height:1px;
	margin:0px 0px 5px;
}
.d{
	font-size:15px;
	text-align:justify;
}