css样式实现：左上方带标记三角的四边拼接图形

效果：

html：

<div class="category-area">
    <ul class="category-ul">
        <li @click="tabAll('gas',index)" class="category-li" :class="{'checked':index==gasIndex}" v-for="(item,index) in GasProductionData" :key="index">
            <div class="triangle"></div>
            <div class="triangle-big"></div>
            <div class="graph"></div>
            <div class="category-name">名称{{index}}</div>
        </li>
    </ul>
</div>

css：

.category-area{
    .category-ul{
    	font-size: 14px;
        display: -webkit-flex;
		display: flex;
		justify-content: left;
		align-items: center;
        margin: 13px;
        .category-li{
            position: relative;
            border: 1px solid #4D75FC;
            // border: 1px solid yellow;
            color: #fff;
            flex: 1;
            padding-top: 40px;
            padding-left: 10px;
            height: 192px;
            margin-left: 10px;
            &.checked{
                background: #4D75FC;
            }
            &:first-child{
                margin-left: 0;
            }
            .category-name{
                padding-left: 10px;
            }
            .category-num{
                padding: 12px 0 12px 10px;
                .num{
                    font-size: 30px;
                    line-height: 42px;
                }
            }
            .status-num{
                display: inline-block;
                min-width: 70px;
                background: #fff;
                color: #FF0000;
                border-radius: 12px;
                line-height: 14px;
                margin-left: 10px;
                text-align: center;
                padding: 3px 6px;
                &.num-down{
                    color: #25C384;
                }
            }
        }
        .triangle{
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 0;
            border-top: 26px solid #4D75FC;
            border-right: 26px solid transparent;
        }
        .triangle-big{
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 0;
            border-top: 35px solid #4D75FC;
            border-right: 35px solid transparent;
        }
        .graph{
            content:"";
            display:block;
            height:0;
            border-width:0px 5px 5px;
            border-style:none solid solid;
            border-color:transparent transparent #021656;
            position:absolute;
            -moz-transform:rotate(-45deg);/*FF浏览器*/
            -webkit-transform:rotate(-45deg);/*chrome浏览器*/
            -o-transform:rotate(-45deg);/*oprea浏览器*/
            -ms-transform:rotate(-45deg);/*IE浏览器*/
            left:-10px;
            top:12px;
            width:50px;
        }
    }
}