html - 圆 Angular 边框

Question

我的标题导航中有一个标签，上面有一个边框。该选项卡具有圆 Angular 。我希望选项卡上的边框与页眉上的边框齐平。但是圆 Angular 似乎会产生锥形效果。我该如何缓解这种情况？我的 fiddle :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 添加到 header ，效果会很好:Demo