I am attempting to make a trapezoidal perspective shape clickable for the entire area. It's currently working in Firefox and IE, but I'm encountering issues with Chrome.
Here is a demonstration of the shape and a link: http://jsfiddle.net/9n9uh6f6/1/. In Chrome, the link only becomes active when hovering over the 'area' part of the text, while other browsers allow the entire height of the shape to be clickable.
I've learned that Chrome may render perspective images differently, which could explain why it's not functioning as expected.
Below is my CSS code:
.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;
}