創建垂直選項卡菜單

Question

我需要創建以下選項卡菜單。你能給我一些提示或在小提琴上展示一些例子嗎？感謝您的任何建議。

編輯..我需要創建頂部和底部的箭頭

.tabs { 
 
    list-style: none; 
 
    } 
 

 
.tabs a { 
 
    display: block; 
 
    width:110px; 
 
    padding: 10px 25px 10px 15px; 
 
    text-decoration: none; 
 
    background-color: #dde2e4; 
 
    color: #19305a; 
 
    font-weight: bold; 
 
    font-family: Lato; 
 
    font-size: 13px; 
 
    border-bottom: 1px solid #ccc; 
 
} 
 

 
.tabs a.active { 
 
    background: #fff; 
 
    border-right: none; 
 
}

<ul class="tabs"> 
 
    <li><a href="#tab1">Process Data</a></li> 
 
    <li><a href="#tab2" class="active">Requested Information</a></li> 
 
    <li><a href="#tab3">General Structure</a></li> 
 
    <li><a href="#tab4">Client Details</a></li> 
 
</ul>

Answer 1

我在使用純CSS（無填料元素）看到的問題將是一起創建頂部和底部箭頭邊框。通常，具有邊界的箭頭的解決方案使用:before和:after僞類。

如果你願意放棄其中一個箭頭，一個可能的解決方案可以在這裏看到：

http://codepen.io/rkieru/pen/grRqXq

Answer 2

類似的東西？給你一些代碼不會幫助你......

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 200px; 
 
    background-color: #f1f1f1; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: #000; 
 
    padding: 8px 0 8px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a.active { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
} 
 

 
li a:hover:not(.active) { 
 
    background-color: #555; 
 
    color: white; 
 
}

<ul> 
 
    <li><a class="active" href="#process">Process Data</a></li> 
 
    <li><a href="#request">Requested Information</a></li> 
 
    <li><a href="#general">General Structure</a></li> 
 
    <li><a href="#client">Client Details</a></li> 
 
</ul>