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;