<template>    <div class="father">      <div :class="['first', 'tab', {tit: cla === 'f'}]" @click="handle('f')">        <span>left</span>      </div>      <div :class="['secode', 'tab', {tit: cla === 'r' }]" @click="handle('r')">        <span>right</span>      </div>   </div> </template> <script> export default { data(){ return{   cla: 'f' } }, mounted(){ }, create(){ }, methods:{   handle(click){     this.cla = click   } } } </script> <style>     *{       margin: 0;       padding: 0;     }     .father{       width: 1240px;       display: flex;       justify-content: center;       align-items: center;       height: 60px;       /* border: 2px solid #1890FF; */       position: absolute;       top: 50%;       left: 50%;       transform: translate(-50%, -50%);       justify-content: space-between;       align-items: flex-end;     }     /* .father .tab{       height: 50px;       background-color: chartreuse;       text-align: center;       line-height: 50px;       padding: 2px;     } */     .tab{       width: 50%;       line-height: 60px;       text-align: center;       background-color: chartreuse;     }     .tit{       height: 70px;       background-color: chocolate;       color: crimson;       position: relative;     }     .first.tit::after{       content: '';       position: absolute;       right: -50px;       border-bottom: 70px solid black;       border-right: 50px solid transparent;     }     .secode.tit::after{       content: '';       position: absolute;       left: -50px;       border-bottom: 70px solid black;       border-left: 50px solid transparent;     } </style>