css - 带有 CSS 三 Angular 形的标签边框

Question

我正在尝试像图片中那样表示我的 HTML/CSS 选项卡。

我已经用 border-radius 尝试了很多东西，但都没有成功。您是否有任何轨道，以便我可以只使用 CSS 复制我的标签，就像图片一样？

Answer 1

为了制作与图像中相同的边框(也在三 Angular 形内部)，您可以使用伪元素并变换旋转:

DEMO

输出:

HTML :

<div>Critiques</div>
<div>Messages sur le forum</div>
<div>Actualités</div>

CSS:

div{
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    padding-right:12px;
    line-height:50px;
    float:left;
    width:200px;
    position:relative;
    z-index:0;
    text-align:center;
}

div:after,div:before{
    content:'';
    position:absolute;
    width:10px;
    height:10px;
    background:#fff;
    z-index:999;

    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

div:before{
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
    top:0; left:-12px;

     -ms-transform-origin:100% 0;
    -webkit-transform-origin:100% 0;
    transform-origin:100% 0;
}

div:after{
    border-left:1px solid #ccc;
    border-top:1px solid #ccc;
    bottom:0;
    right:4px;

     -ms-transform-origin:0 100%;
    -webkit-transform-origin:0 100%;
    transform-origin:0 100%;
}
div:first-child:before, div:last-child:after{
    display:none;
}