自定义选项卡有毛刺

Question

我正在尝试使用angular及其引导组件 - http://angular-ui.github.io/bootstrap/中的ui.bootstrap.tabs来制作看上去很奇怪的标签。到目前为止它看起来像这样：

注意红圈中的毛刺。它们并不总是存在，只有在浏览器窗口调整为特别不满意的大小时才会出现。

样式如下：

.nav-tabs > li > a,
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
    color: #000000;
    text-align: center;
    vertical-align: middle;
    position: relative;
    display: block;
    text-align: center;
    padding: .2em 0 .2em 1em;
    margin: 0px;
    height: 2em;
    background: white;
    border-left: 0.1em solid #b0b7bb;
    border-top: 0.1em solid #b0b7bb;
    border-bottom: 0.1em solid #b0b7bb;
    border-right: none;
    border-top-left-radius: 0.3em;
    border-top-right-radius: 0;
    margin: 0px 3.2em 0px 0px;
}

.nav-tabs > li > a:before {
    content: '';
    position: absolute;
    top: -0.1em;
    right: -2em;
    height: 2em;
    width: 2em;
    background: white;
    border-left: none;
    border-top: 0.1em solid #b0b7bb;
    border-bottom: 0.1em solid #b0b7bb;
    border-right: none;
}

.nav-tabs > li > a:after {
    content: '';
    position: absolute;
    top: -0.1em;
    right: -3em;
    height: 2em;
    width: 2em;
    background: white;
    padding: 0px;
    margin: 0px;
    -webkit-transform: skew(0deg, 0deg);
    -moz-transform: skew(0deg, 0deg);
    -ms-transform: skew(0deg, 0deg);
    -o-transform: skew(0deg, 0deg);
    transform:  skew(20deg, 0deg);
    border-left: none;
    border-top: 0.1em solid #b0b7bb;
    border-bottom: 0.1em solid #b0b7bb;
    border-right: 0.1em solid #b0b7bb;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: white;
    border-left: 0.1em solid #b0b7bb;
    border-top: 0.1em solid #b0b7bb;
    border-bottom: 0.1em solid #b0b7bb;
    border-right: none;
    background: #0066cc;
}

.nav-tabs > li.active > a:before {
    background: #0066cc;
}

.nav-tabs > li.active > a:after {
    background: #0066cc;
}

.nav-tabs {
    border: 0 none;
    padding: 0;
    margin: 0;
}

.tab-content {

}

Full plunk在这里http://plnkr.co/edit/FViETgumIqWCWzQjo8Ff?p=preview。

问题是如何摆脱这些故障。任何帮助都非常感谢。

最好的问候，尤金。

Answer 1

transform: skew(20deg, 0deg); .nav-tabs > li > a:after我明白你正试图达到'倾斜'的效果，但在每个css规则的元素之后，偏差会偏离20度。

MDN建议不要使用它： https://developer.mozilla.org/en-US/docs/Web/CSS/transform#skew

您可能想尝试这种替代技术。 http://lea.verou.me/2013/10/slanted-tabs-with-css-3d-transforms/