Question

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

Tabs

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

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

有可能吗？

Answer 1

这是纯CSS的概念验证示例。它使用伪元素和rotate。它与你的源图像非常接近，可以通过一些工作更接近。

screenshot

演示：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; 
}

Answer 2

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

Answer 3

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

无论如何，对于简单的标签，你可以使用：

来制作diagonales

.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;
}

<强> Exemple

当然，这并不是你想要的，但它可以是一个开始的东西。

Answer 4

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

如何用css制作圆形标签？

4 个答案: