我想知道是否可以使用CSS存档以下效果
我发现这些文章有点帮助,但问题是在我的情况下标签边是对角线而不是直线垂直线：
http://css-tricks.com/tabs-with-round-out-borders/
http://css-tricks.com/better-tabs-with-round-out-borders/
有可能吗？
解决方法
这是纯CSS的概念验证示例.它使用伪元素和旋转.它与你的源图像非常接近,可以通过一些工作更接近.
演示：http://jsfiddle.net/csDP9/9/
HTML：
<ul>
<li>Sample 1</li>
<li class="active">Sample 2</li>
<li>Sample 3</li>
<li>Sample 4</li>
</ul>
CSS：
/* Reset ul styles */
body { font-family: sans-serif; }
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul {
padding-left: 20px;
z-index: 5;
}
ul li {
color: grey;
background: #fefefe;
padding: 14px 24px 10px;
margin: 0px -6px 0 10px;
position: relative;
float: left;
text-align: center;
z-index: 1;
}
ul li::before {
content: '';
display: block;
position: absolute;
top: 0; left: 0;
width: 70%;
height: 100%;
border-style: solid;
border-color: #eee;
border-width: 2px 0 2px 2px;
border-radius: 8px 0 0 0;
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);
background-color: inherit;
z-index: -1;
}
ul li::after {
content: '';
display: block;
position: absolute;
top: 0; right: 0;
width: 70%;
height: 100%;
border-style: solid;
border-color: #eee;
border-width: 2px 2px 2px 0;
border-radius: 0 8px 0 0;
-webkit-transform: skewX(20deg);
-moz-transform: skewX(20deg);
-o-transform: skewX(20deg);
transform: skewX(20deg);
background-color: inherit;
z-index: -1;
}
ul li.active {
color: orange;
z-index: 10;
}
ul li.active::before,ul li.active::after {
background-color: #fff;
border-bottom-color: #fff;
}
ul li:not([class='active']):hover::before,ul li:not([class='active']):hover::after {
background-color: #efefef;
}
