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

Answer 2

Try this shape for link trapazoid shape - jsFiddle

Advantage - you can change skew property to change angle of shape! Easy and effective! Reverse value for reverse shape!

---

html

<a href="http://www.google.com">Click Here!</a>

css

 a {
    display: block;
    z-index: 1;
    position: relative;
    /* custom sizes */
    width: 136px;
    height: 85px;
    /* demo-only decoration */
    margin: 100px auto;
    font: 16px/50px Arial, sans-serif;
    text-transform: uppercase;
    text-align: center;
    background-color: orange;
}
a:before, a:after {
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    bottom: 0;
    z-index: -1;
    /* demo-only decoration */
    border-radius: 4px;
    background-color: orange;
}
a:before {
    transform: skew(-20deg);
    left: 25px;
}
a:after {
    transform: skew(20deg);
    right: 25px;
    left: auto;
}