html - Chrome 浏览器中的 CSS 梯形可点击区域问题

Question

我正在尝试获得一个梯形透视形状，以使整个区域都可以点击。我已经让它在 Firefox 甚至 IE 中工作，但 Chrome 配合得不太好。

这是一个带有形状和链接的 fiddle :http://jsfiddle.net/9n9uh6f6/1/ 如您所知，直到您将鼠标悬停在文本的“区域”部分上时，链接才会变为事件状态。在其他浏览器中，形状的整个高度都是可点击的。

我读到 Chrome 以不同方式呈现透视图像，这也许就是它没有按预期执行的原因。

这是我的 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

请看这段代码:

.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);
}

似乎按照您想要的方式工作。 fiddle