Reverse-Tabs mit css3

Question

Ich verwende Trapez-Tabs, aber ich möchte diese Registerkarte durch vertikales Umdrehen der Registerkarte ändern. Details sind unten angegeben.

Bestehende Design

Hier ist der Code für diese Registerkarte.

.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>

Wie kann ich Tabs wie dieses Bild aussehen.

Wunsch Bild

Danke Community mir geholfen.

Answer 1

etwas wie folgt aus:

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

, wenn Sie diese CSS über das Internet versuchen, die Sie schreiben, es funktioniert gut. die Änderungen i gemacht sind:

zu .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); 

zu .tabs nav a ich hinzufügen:

border-radius: 0 0 0 10px;