css3を使用してタブを反転する

Question

台形のタブを使用していますが、タブを上下に反転することでこのタブを変更したいと考えています。詳細は以下の通りです。

既存の設計

ここでは、このタブのコードです。私はタブが、この画像のように見えるようにするにはどうすればよい

.tabs-style-tzoid nav ul li a { 
 
    padding: 0 1.5em 0 0.3em; 
 
    color: #FFFFFF; 
 
    -webkit-transition: color 0.2s; 
 
    transition: color 0.2s; 
 
} 
 

 
.tabs-style-tzoid nav ul li a::after { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index: -1; 
 
    outline: 1px solid transparent; 
 
    border-radius: 10px 10px 0 0; 
 
    background: #1CA4FC; 
 
    box-shadow: inset 0 -3px 3px rgba(0, 0, 0, 0.05); 
 
    content: ''; 
 
    -webkit-transform: perspective(5px) rotateX(0.93deg) translateZ(-1px); 
 
    transform: perspective(5px) rotateX(0.93deg) translateZ(-1px); 
 
    -webkit-transform-origin: 0 0; 
 
    transform-origin: 0 0; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
}

<div class="tabs tabs-style-tzoid"> 
 
    <nav> 
 
    <ul> 
 
     <li class="tab-current"> 
 
     <a href="#"><i class="fa fa-dashboard"></i><span>Dashboard</span></a> 
 
     </li> 
 
     <li> 
 
     <a href="#"><i class="fa fa-envelope"></i><span>Messages</span></a> 
 
     </li> 
 
     <li> 
 
     <a href="# "><i class="fa fa-check "></i><span>Applied Jobs</span></a> 
 
     </li> 
 
     <li> 
 
     <a href="# "><i class="fa fa-mail-reply "></i><span>Past Jobs</span></a> 
 
     </li> 
 
     <li> 
 
     <a href="#"><i class="fa fa-user"></i><span>My Profile</span></a> 
 
     </li> 
 
     <li> 
 
     <a href="#"><i class="fa fa-file-text"></i><span>Resume</span></a> 
 
     </li> 
 
     <li> 
 
     <a href="#"><i class="fa fa-folder"></i><span>Document</span></a> 
 
     </li> 
 
     <li> 
 
     <a href="#"><i class="fa fa-cogs"></i><span>Settings</span></a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</div>

。

欲望の画像は、私を助けてあなたのコミュニティをありがとうございます。このような

Answer 1

何か：あなたが投稿したウェブ上で、このCSSをしようとした場合

.tabs-style-tzoid nav ul li a::after { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: -1; 
    outline: 1px solid transparent; 
    border-radius: 0 0 10px 10px; 
    background: #2CC185; 
    box-shadow: inset 0 -3px 3px rgba(0,0,0,0.05); 
    content: ''; 
    -webkit-transform: skew(-28deg) rotateX(0.93deg) translateZ(-1px); 
    transform: skew(-28deg) rotateX(0.93deg) translateZ(-1px); 
    -webkit-transform-origin: 0 0; 
    transform-origin: 0 0; 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
} 

.tabs nav a { 
    position: relative; 
    display: block; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    line-height: 2.5; 
    border-radius: 0 0 0 10px; 
} 

、それが正常に動作します。 私が行った変更は、次のとおりです。.tabs nav aへ

から.tabs-style-tzoid nav ul li a::after

border-radius: 0 0 10px 10px; 
-webkit-transform: skew(-28deg) rotateX(0.93deg) translateZ(-1px); 
transform: skew(-28deg) rotateX(0.93deg) translateZ(-1px); 

は私が追加：

border-radius: 0 0 0 10px;