如何制作p：向导标签看起来像箭头？

Question

如何使p:tab中的p:wizard看起来像一个箭头，类似附图

先感谢您。

Answer 1

你可以通过CSS做到这一点：

.firstTab{    
    line-height: 43px;
    text-align:center;  
    height:60px;
    width:210px;
    -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

.middleTab{    
    line-height: 43px;
    text-align:center;  
    margin-left: -30px !important;
    height:60px;
    width:210px;
    -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}

.lastTab{
    line-height: 43px;
    text-align:center;  
    margin-left: -85px !important;
    height:60px;
    width:220px;
    -webkit-clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 55% 50%);
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 50% 50%);
}

在你的xhtml文件中：

    <p:tabView activeIndex="#{declarationMBean.activeIndex}" style="align-content: center; background: #67a3cf;" >
            <p:ajax event="tabChange" listener="#{declarationMBean.onTabChange}" />
            <p:tab id="tab_0" title="Example" titleStyleClass="firstTab" > 
.
.
.
 <p:tab id="tab_2" titleStyleClass="middleTab"> 
.
.    
 <p:tab id="tab_3" titleStyleClass="middleTab">     
.
.
<p:tab id="tab_4" titleStyleClass="lastTab">