8

我想知道是否可以使用 CSS 归档以下效果

标签

我发现这些文章很有帮助，但问题是在我的情况下，标签边是对角线而不是垂直线：

http://css-tricks.com/tabs-with-round-out-borders/
http://css-tricks.com/better-tabs-with-round-out-borders/

有可能吗？

4

4 回答 4

9

这是一个纯 CSS 的概念证明示例。它使用伪元素和rotate. 它非常接近您的源图像，并且可以通过一些工作变得更接近。

截屏

演示：http: //jsfiddle.net/csDP9/9/

HTML：

/* 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; 
}
<ul>
    <li>Sample 1</li>
    <li class="active">Sample 2</li>
    <li>Sample 3</li>
    <li>Sample 4</li>
</ul>

于 2013-10-14T17:08:09.937 回答
2

你可以用CSS Matrix Transforms做到这一点，但坦率地说，我不会打扰。它很复杂，跨浏览器兼容性参差不齐。只需使用图像。

于 2013-10-14T15:36:33.783 回答
1

我认为使用 CSS，您无法获得像您的示例那样的标签。最好的解决方案是使用图像或矩阵变换（正如其他人已经回答的那样）。

无论如何，对于简单的选项卡，您可以使用对角线：

.tabrow li:before {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 5px 26px 5px;
    border-color: transparent transparent #aaa transparent;
    position: absolute;
    content:" ";
    left:-5px;
    top:4px;
    z-index:-1;
}
.tabrow li:after {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 5px 26px 5px;
    border-color: transparent transparent #aaa transparent;
    position: absolute;
    content:" ";
    right:-5px;
    margin-top:4px;
    z-index:-1;
}

示例

当然，这并不完全是您想要的，但它可以作为开始。

于 2013-10-14T16:06:50.217 回答
0

CSS3 提供圆角效果，但不提供对角线效果。您可能只需要使用图像。

于 2013-10-14T15:33:19.613 回答