答案 0 :(得分: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">