マイターアングル マイターエッジ

<div class="tab-basic">
	<el-tabs v-model="activeCaseName" class="tabs tabs-case-stage" tab-position="left">
 <el-tab-pane label=" " name="spyon" />
 <el-tab-pane label=" " name="prosecute" />
 <el-tab-pane label=" " name="judge" />
 <el-tab-pane label=" " name="carryout" />
</el-tabs>
</div>

.tab-basic{
 /deep/.el-tabs__item {
 /*color: #818181;*/
 color: #7ab5ff;
 }
 /deep/.el-tabs__item.is-active {
 /*color: #414141;*/
 background: #7ab5ff;
 color: #fff;
 border: 0;
 }
}
.tab-basic {
 display: flex;
 margin-top: 20px;
 .tabs{
 /*width: 300px;*/
 /deep/.el-tabs__item.is-left {
 text-align: center;
 margin-left: 0;
 width: 200px;
 }
 }
} 
/deep/.el-tabs__active-bar {
 display: none;
}
.tabs-case-stage{
 width: 400px;
 display: flex;
 justify-content: flex-end;
 /deep/.el-tabs__item{
 border: 1px solid #dcdfe6;
 margin-bottom: 8px;
 &:before{
 content: '';
 width: 10px;
 height: 10px;
 position: absolute;
 left: -1px;
 top: 0;
 background:
 linear-gradient(-45deg, transparent 49.5%, #dcdfe6 49.5%, #dcdfe6 50.5%, transparent 50.5%);
 }
 &:after{
 content: '';
 width: 0;
 height: 0;
 position: absolute;
 left: -1px;
 top: -1px;
 border: 5px solid #fff;
 border-bottom-color: transparent;
 border-right-color: transparent;
 }
 &.is-active:after{
 content: '';
 width: 0;
 height: 0;
 position: absolute;
 left: 0;
 top: 0;
 border: 5px solid #fff;
 border-bottom-color: transparent;
 border-right-color: transparent;
 }
 }
}