创建垂直选项卡菜单

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>