1.出现如上情况，用element-ui同样也可以实现；

2.实现难度在于，用css画出来的三角可以实现，三十由于父盒子宽度不够，会被默认隐藏，此时我们需要抬高下划线和三角形，如何用伪类让后面的线也抬高；代码如下：

::v-deep?.thing-tab?{

????.is-stretch?{

????????display:?flex;

????????min-width:?1024px;

????}

????.el-tabs__item?{

????????width:?200px;

????????height:?125px;

????????padding:?30px?45px?28px?50px;

????????color:?#298ee8;

????????font-weight:?500;

????????font-size:?42px;

????????font-family:?Alibaba-PuHuiTi-Medium,?sans-serif;

????????text-align:?center;

????}

????.el-tabs__active-bar?{

????????top:?96px;

????????width:?254px?!important;

????????background-color:?#298ee8;

????????&::after?{

????????????position:?absolute;

????????????top:?2px;

????????????left:?118px;

????????????width:?0;

????????????height:?0;

????????????border-top:?20px?solid?rgba(41,?142,?232,?1);

????????????border-right:?20px?solid?transparent;

????????????border-bottom:?0?solid?transparent;

????????????border-left:?20px?solid?transparent;

????????????content:?'';

????????}

????}

????.is-active?{

????????color:?#298ee8;

????}

????.el-tabs__nav-wrap::after?{

????????position:?absolute;

????????bottom:?25px;

????????left:?0;

????????//?display:?none;

????????width:?100%;

????????height:?2px;

????????background-color:?#333;

????????content:?"";

????????z-index:?1;

????}

}

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。