我正在尝试像图片中那样表示我的 HTML/CSS 选项卡。
我已经用 border-radius 尝试了很多东西,但都没有成功。 您是否有任何轨道,以便我可以只使用 CSS 复制我的标签,就像图片一样?
最佳答案
为了制作与图像中相同的边框(也在三 Angular 形内部),您可以使用伪元素并变换旋转:
输出:
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;
}
关于css - 带有 CSS 三 Angular 形的标签边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23955323/