Question

我的标题导航栏中有一个标签，上面有一个边框。标签有圆角。我希望我的标签上的边框与标题上的边框齐平。但圆角似乎会产生锥形效果。我怎么能缓解这个？我的小提琴：fiddle

的CSS：

.gizmo {
    position:fixed;
    top:0;
    width:100%;
    height:40px;
    background-color:#4c4c4c;
    border-bottom:1px solid red;
}
.tab-shit {
    position:absolute;
    width:40px;
    right:100px;
    height:50px;
    top:7px;
    background-color:#4c4c4c;
    border-radius:0 0 20px 20px;
    border-bottom:1px solid red;
}

HTML：

<div class="gizmo">
    <div class="tab-shit"></div>
</div>

Answer 1

试试这个：

.tab-shit {
    height:20px;
    border:5px solid red;
    border-top: none;
    bottom:-25px;                /* -25 = - (height+border) */
    border-radius:0 0 25px 25px; /*  25 =    height+border  */
}

Demo

如果您在标题中添加border-bottom，则效果很好：Demo

Answer 2

所以问题是border-bottom声明不会影响左右声明，因此浏览器会尝试使转换顺利进行，因为它应该使用角落的顶端{ {1}}和border-left。为了解决这个问题，我建议使用伪元素来应用边框。像这样：

border-right

执行此操作可让您根据需要设置边框样式，而不会影响元素中的其他内容。但是，如果您正在使用CSS转换，请小心，因为他们不会处理生成的内容。

<强> Demo

Answer 3

到目前为止提供的答案证明，可以通过在左侧和右侧添加边框并将DOM元素缩小或剪切它以防止左边框和右边框出现在标题div的边框上方来解决问题。我项目中的选项卡实际上包含一个图标，但我在这里简化它只是为了创建我的问题的证明。由于我的标签包含一个图标，我无法收缩高度或剪切我的元素。我得到的是在我的标签下方的新元素上使用上面的答案。所以，我的标签现在已平方，其下方的新span有圆角，边框半径以及左，底，右边框。

圆角的边界

3 个答案: