长方形加右侧三角形 CSS

 <div v-for="(item, index) in rightTabData" :key="index"  @click="getRightTabActive(index)">
          <span class="line"></span> {{item}}       
 </div>


div {  
  float: left;  
  width: auto;  
  height: 36px;  
  padding: 8px 10px;
  text-align: center;
  color: #DAE7F9;;
  border: 1px solid #475D7D;
  font-size: 18px;
  margin-right: 15px;
  background: #0C2E56;
  cursor: pointer;
}
div:before{ 
 content:"";
  border:18px solid #475D7D;
  border-top-color:transparent;
  border-right-color:transparent;
  border-bottom-color:transparent;
  width:0px;  height:0px;
  position:absolute;  right:-36px;
  top:-1px;
}
div:after{
  content:"";
  border:17px solid #0C2E56;
  border-top-color:transparent;
  border-right-color:transparent;
  border-bottom-color:transparent;
  width:0px;
  height:0px;
  position:absolute;
  right: -34px;
  top:0px;
}