[英]CSS trapezoid shape clickable area issue in chrome browser
我试图获得一个梯形透视形状,使整个区域都可以点击。 我已经让它在 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;
}
请看一下这段代码:
.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);
}
似乎以您想要的方式工作。 小提琴
试试这个形状的链接梯形形状 - jsFiddle
优点- 您可以更改 skew 属性来更改形状的角度! 简单有效! 反向形状的反向值!
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.