CSS trapezoid shape clickable area issue in chrome browser

Question

I'm trying to get a trapezoidal perspective shape to have the whole area be clickable. I've gotten it to work in Firefox and even IE, but Chrome isn't cooperating too well.

Here's a fiddle with the shape and a link: http://jsfiddle.net/9n9uh6f6/1/ As you can tell, the link doesn't become active until you hover over the 'area' part of the text. In other browsers, the whole height of the shape is clickable.

I read that Chrome renders a perspective image differently and perhaps that's why it's not doing what it's supposed to.

Here's my CSS:

.prodcaptions {
width:136px;
height: 85px;
position:relative;
left:10%;
text-transform:uppercase;
text-align:center;
letter-spacing: 1.6px;
color: #000;
}
.prodcaptions:before {
content:"";
position:absolute;
border-radius:1px;
box-shadow:0 0 0 3px #27628e;
top:-5%;
bottom:-11%;
left:-1%;
right:-5%;
-webkit-transform:perspective(40em) rotateX(-45deg);
transform:perspective(40em) rotateX(-45deg);
}

.prodcaptions a {
z-index:999;
position:relative;
height: 85px;
display: block;
padding-top: 25px;
}

Answer 1

Please have look at this code:

.prodcaptions {
    position: relative;
    height: 150px;
    width: 150px;
    margin: 50px;
    padding: 10px;
    perspective: 150px;
    perspective-origin: 50% 0;
}
a{
    padding: 50px;
    position: absolute;
    border: 1px solid black;  
    transform: rotateX(-15deg);
}

Seems to work the way you want it. fiddle