CSS标签页直线中间凸起

迷失的小鹿

于 2020-07-10 23:58:34 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： css

原文链接：https://segmentfault.com/q/1010000009056747

css 专栏收录该内容

2 篇文章

订阅专栏

这里写自定义目录标题

效果图
样式的编写

效果图

在这里插入图片描述

样式的编写

.tabLine{
    margin-bottom: -2px;
    border-bottom: 2px solid #F5A724 ;
    color: #F5A724 ;
    position: relative;
  }
  .tabLine:before{
    position: absolute;
    top: 42px; left: 45%;
    content: '';
    width: 0; height: 0;
    border-style: dashed dashed solid dashed;
    border-width:10px;
    border-color: transparent transparent #F5A724 transparent;
  }
  .tabLine:after{
    position: absolute;
    top: 45px;
    left: 45%;
    content: '';
    width: 0;
    height: 0;
    border-style: dashed dashed solid dashed;
    border-width: 10px;
    border-color: transparent transparent #F8FAFC transparent;
  }