CSS透视形状URL不起作用

我想使用CSS制作的梯形形状来容纳链接。但它似乎并不奏效。我不确定是因为它不受支持或代码不好。似乎它应该工作！有人知道为什么CSS透视形状URL不起作用

澄清，我知道梯形的作品，但链接里面的梯形是死的。

我的代码：

.box { 
 
    width: 180px; 
 
    height: 70px; 
 
    position: relative; 
 
    padding: 0px; 
 
    left: 10%; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    padding-top: 34px; 
 
    padding-bottom: 10px; 
 
} 
 
.box:before { 
 
    content: ""; 
 
    position: absolute; 
 
    border-radius: 1px; 
 
    box-shadow: 0 1px 0 3px #27628e; 
 
    top: -5%; 
 
    bottom: -11%; 
 
    left: -1%; 
 
    right: -5%; 
 
    z-index: ; 
 
    -webkit-transform: perspective(50em) rotateX(-50deg); 
 
    transform: perspective(50em) rotateX(-50deg); 
 
}

<div class="box"><a href="http://google.com">google.com</a> 
 
</div>

来源

2014-09-29 mango

它工作在IE 11，Firefox和Chrome我。 – 2014-09-29 19:12:24

你的意思是你可以点击google.com并通过？我只能突出显示文字，而不是实际点击网址。 – mango 2014-09-29 19:14:18

对不起，我以为你的意思是你的梯形不起作用。我也无法点击链接。 – 2014-09-29 19:19:09

.box a{ 
position:relative; 
}

，也将努力去点击链接。

.box { 
 
    width: 180px; 
 
    height: 70px; 
 
    position: relative; 
 
    padding: 0px; 
 
    left: 10%; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    padding-top: 34px; 
 
    padding-bottom: 10px; 
 
} 
 
.box:before { 
 
    content: ""; 
 
    position: absolute; 
 
    border-radius: 1px; 
 
    box-shadow: 0 1px 0 3px #27628e; 
 
    top: -5%; 
 
    bottom: -11%; 
 
    left: -1%; 
 
    right: -5%; 
 
    z-index: ; 
 
    -webkit-transform: perspective(50em) rotateX(-50deg); 
 
    transform: perspective(50em) rotateX(-50deg); 
 
} 
 
.box a{ 
 
z-index:999; 
 
    position:relative; 
 
}

<div class="box"><a href="http://google.com">google.com</a> 
 
</div>

来源

2014-09-29 19:15:50

啊，谢谢！难怪它没有奏效。 – mango 2014-09-29 19:21:30

事实上，大'z-index'是非单调的，'position：relative'已经将堆叠上下文中的'a'元素移动得比绝对定位的伪元素高。 – 2014-09-29 20:01:56

@IlyaStreltsyn是的，你是对的 – 2014-09-29 20:11:35

CSS透视形状URL不起作用

回答

相关问题