chrome浏览器中的CSS梯形可点击区域问题

Question

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

这是一个形状和链接的小提琴：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

Answer 2

试试这个形状的链接梯形形状 - jsFiddle

优势 - 你可以改变倾斜属性来改变形状的角度！简单有效！反转形状的反转值！

---

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