CSS変換と擬似クラス

Question

使用方法：after、残酷な擬似3Dボタンを作成しようとしています。 ：：afterが目的の要素の上に表示されています。

What I'm Trying to accomplish

What I'm getting

編集：明らかに変換邪魔になっており、研究が生じる理由や周りの仕事を見つけるためには至っていません。

私には何が欠けていますか？それとも良い方法がありますか？

nav li.active, 
nav li:hover{ 
    background:#000; 
} 

...次のようになります：ここで

nav li.active a, 
nav li:hover a{ 
    background:#000; 
} 

は、作業コードです：

nav li { 
 
    position: relative; 
 
    display:inline-block; 
 
    transition: background 0.2s; 
 
    transform: skewX(10deg); 
 
} 
 
nav li a { 
 
    display:block; 
 
    text-decoration:none; 
 
    padding: 5px 10px; 
 
    font: 30px/1 sans-serif; 
 
    color: #0bf; 
 
} 
 
nav li.active, 
 
nav li:hover{ 
 
    background:#000; 
 
} 
 

 
nav li.active:after { 
 
    content: ""; 
 
    display: inline-block; 
 
    top: 10px; 
 
    left: 10px; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: red; 
 
    
 
    position: absolute; 
 
    z-index: -1; 
 
}

<nav> 
 
    <ul> 
 
    
 
    <li class="active"> 
 
     <a href="#">Products</a> 
 
    </li> 
 
    
 
    </ul> 
 
</nav>

Answer 1

出来上がり...ただ、この部分を編集した

代わりに :afterの

nav li { 
 
    position: relative; 
 
    display:inline-block; 
 
    transition: background 0.2s; 
 
    transform: skewX(10deg); 
 
} 
 
nav li a { 
 
    display:block; 
 
    text-decoration:none; 
 
    padding: 5px 10px; 
 
    font: 30px/1 sans-serif; 
 
    color: #0bf; 
 
} 
 
nav li.active a, 
 
nav li:hover a{ 
 
    background:#000; 
 
} 
 

 
nav li.active:after { 
 
    content: ""; 
 
    display: inline-block; 
 
    top: 10px; 
 
    left: 10px; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: red; 
 
    
 
    position: fixed; 
 
    z-index: -1; 
 
}

<nav> 
 
    <ul> 
 
    
 
    <li class="active"> 
 
     <a href="#">Products</a> 
 
    </li> 
 
    
 
    </ul> 
 
</nav>

Answer 2

、あなたはbox-shadowを使用することができます。

nav li { 
 
    position: relative; z-index:0; 
 
    display:inline-block; 
 
    transition: background 0.2s; 
 
    transform: skewX(10deg); 
 
    box-shadow: 10px 10px 0 red; 
 
} 
 
nav li a { 
 
    display:block; 
 
    text-decoration:none; 
 
    padding: 5px 10px; 
 
    font: 30px/1 sans-serif; 
 
    color: #0bf; 
 
} 
 
nav li.active, 
 
nav li:hover{ 
 
    background:#000; 
 
}

<nav> 
 
    <ul> 
 
    
 
    <li class="active"> 
 
     <a href="#">Products</a> 
 
    </li> 
 
    
 
    </ul> 
 
</nav>