css样式实现：带边框的平行四边形

效果：

html:

<ul class="tab-right">
    <li @click="tabAll('factory',index)" class="tab-li" v-for="(item,index) in factoryList" :key="index">
        <div :class="{checked:factoryIndex==index}" class="tab-in">{{item.name}}</div>
    </li>
</ul>

css:

.tab-right{
    @include fj(right);
    .tab-li{
        position: relative;
        display: inline-block;
        width: 104px;
        text-align: center;
        line-height: 14px;
        padding: 8px 0;
        // border: 1px solid red;
        // border: 0;
        margin-right: 16px;
        background: transparent;
        text-transform: uppercase;
        text-decoration: none;
        // font: bold 200%/1 sa;
        &::before{
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: -1;
            background: #00EAFF;
            transform: skew(-45deg);
        }
        .tab-in::before{
            content: '';
            position: absolute;
            top: 1px;
            right: 1px;
            bottom: 1px;
            left: 1px;
            z-index: -1;
            background: #58a;
            transform: skew(-45deg);
        }
        .checked.tab-in::before{
            content: '';
            position: absolute;
            top: 1px;
            right: 1px;
            bottom: 1px;
            left: 1px;
            z-index: -1;
            background: #00EAFF;
            transform: skew(-45deg);
        }
    }
}