css - 如何在angular 6中的prime-ng tabview选项卡中添加样式？

Question

我正在使用prime-ng tabView并且当前的tabview是这样的


我想为tabView实现以下类型的标签。


有没有办法做到这一点？

基本的p-tabview实现是这样的。

<p-tabView [(activeIndex)]="currentTab">
        <p-tabPanel header="Tab1"  ></p-tabPanel>
        <p-tabPanel header="Tab2"  ></p-tabPanel>
        <p-tabPanel header="Tab3"  ></p-tabPanel>
        <p-tabPanel header="Tab4"  ></p-tabPanel>
        <p-tabPanel header="Tab5"  ></p-tabPanel>
</p-tabView>

Answer 1

您好，我在html CSS中开发了此箭头标签视图，

Angular Project github

.container{
    display: flex;
}
.main-div1{
    position: relative;
    height: 60px;
    background: #009688;
    width: 89px;
    left: 107px;
    color: white;
    margin-right: 75px;
    text-align: center;
    line-height: 60px;
}
.main-div1:before{
    content: "";
    position: absolute;
    top: 0px;
    left: -49px;
    border-style: solid;
    border-width: 30px 0px 30px 34px;
    border-color: #009688 transparent;
    display: block;
    width: 0;
    width: 15px;
    z-index: 0;
    height: 0px;    
  }

  .main-div1::after{
    content: "";
    position: absolute;
    top: 0px;
    left: 89px;
    border-style: solid;
    border-width: 30px 0px 30px 34px;
    border-color:transparent #009688;
    display: block;
    width: 0;
    width: 15px;
    z-index: 0;
    height: 0px;    
  }

  .main-div2{
    position: relative;
    height: 60px;
    background: #009688;
    width: 89px;
    left: 107px;
    color: white;
    margin-right: 75px;
    text-align: center;
    line-height: 60px;
}
.main-div2:before{
    content: "";
    position: absolute;
    top: 0px;
    left: -49px;
    border-style: solid;
    border-width: 30px 0px 30px 34px;
    border-color: #009688 transparent;
    display: block;
    width: 0;
    width: 15px;
    z-index: 0;
    height: 0px;    
  }

  .main-div2::after{
    content: "";
    position: absolute;
    top: 0px;
    left: 89px;
    border-style: solid;
    border-width: 30px 0px 30px 34px;
    border-color:transparent #009688;
    display: block;
    width: 0;
    width: 15px;
    z-index: 0;
    height: 0px;    
  }

  .main-div3{
    position: relative;
    height: 60px;
    background: #009688;
    width: 89px;
    left: 107px;
    color: white;
    margin-right: 75px;
    text-align: center;
    line-height: 60px;
}
.main-div3:before{
    content: "";
    position: absolute;
    top: 0px;
    left: -49px;
    border-style: solid;
    border-width: 30px 0px 30px 34px;
    border-color: #009688 transparent;
    display: block;
    width: 0;
    width: 15px;
    z-index: 0;
    height: 0px;    
  }

  .main-div3::after{
    content: "";
    position: absolute;
    top: 0px;
    left: 89px;
    border-style: solid;
    border-width: 30px 0px 30px 34px;
    border-color:transparent #009688;
    display: block;
    width: 0;
    width: 15px;
    z-index: 0;
    height: 0px;    
  }

<div class="container">
  <div class="main-div1"> Booked</div>
  <div class="main-div2"> Ready Ship</div>
  <div class="main-div3"> Scheduled</div>
</div>

] 1