在Chrome瀏覽器中CSS梯形形狀可點擊區域問題

我試圖讓梯形透視形狀具有可點擊的整個區域。我已經得到它在Firefox甚至IE瀏覽器的工作，但Chrome不太合作。在Chrome瀏覽器中CSS梯形形狀可點擊區域問題

下面是一個形狀和鏈接的小提琴：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; 
}

來源

2014-10-03 mango

你怎麼樣改造一個裏面呢？ - 顯然這並不重要，因爲該區域沒有延伸過文本部分。仍在測試。 – 2014-10-03 20:38:44

我不知道該怎麼做。這是我第一次使用這些類型的形狀！ – mango 2014-10-03 20:39:37

看看這個：** http：//jsfiddle.net/9n9uh6f6/2/** ..這是可以接受的嗎？（我刪除了'：before'，所以文本也是透視的，所有的文本現在都得到指針光標） – myfunkyside 2014-10-03 20:43:41

嗯..怎麼樣：

.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

來源

2014-10-03 21:13:09

你是一個嚮導！ – myfunkyside 2014-10-03 21:22:13

@myfunkyside嗯，謝謝，有時候會發生:) – 2014-10-03 21:24:27

試試這個形狀鏈接trapazoid形狀 - jsFiddle

優勢 - 你可以改變扭曲屬性來改變形狀的角！簡單而有效！反轉形狀的反向值！

enter image description here

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

來源

2014-10-03 21:53:03 Suresh

它看起來很棒，而且一切都很簡單，只是它在設計過程中需要透明。你的建議可以嗎？ – mango 2014-10-04 02:24:54

是的，這是可能的 – Suresh 2014-10-04 05:22:19

在Chrome瀏覽器中CSS梯形形狀可點擊區域問題

回答

相關問題