vue3实现模拟表格（第一个单元格分两个三角形）

最终效果

实现方式

用边框线来摸拟斜线，我们知道，如果将一个DIV的边框线设置得足够宽并定义了不同的颜色时，其相邻的两条边框线交界处就是斜线。知道了这个原理，我们就可以用border-left和border-top来模拟出斜线的效果。

vue3代码

<template>
    <div>
        <table table-layout="fixed" class="excel-table">
            <!-- 第一行 -->
            <tr>
                <th style="width: 140px;">
                    <!-- 第一个单元格 -->
                    <div class="out">
                        <span class="top">上</span>
                        <span class="left">下</span>
                    </div>
                </th>
                <th v-for="row in table.row">{{row}}</th>
            </tr>
            <tr v-for="column in table.column">
                <td>{{column}}</td>
                <td v-for="item in 5">单元格</td>
            </tr>
        </table>
    </div>
</template>

<script setup>
const table = reactive({
    row:["第一列","第一列"，"第一列"，"第一列"，"第一列"],
    column:["第一行","第一行"，"第一行"，"第一行"，"第一行"],
})
</script>

<style lang="scss" scoped>
.excel-table{
    border-collapse: collapse;
    border: 1px solid #7d99c0;
    width: 100%;

    tr,td,th{
        height: 90px;
        width: 140px;
        border: 1px solid #7d99c0;
        text-align: center;
    }

    //第一个单元格样式
    .out{
        width: 0px;
        height: 0px;
        background-color: #05397d;
        border-right: 160px solid #357188;
        border-bottom: 100px solid transparent;
        position: relative;
        .top{
            display: block;
            position: absolute;
            top: 20px;
            left: 60px;
            width: 100px;
        }
        .left{
            display: block;
            position: absolute;
            top: 20px;
            left: 60px;
            width: 100px;
        }
    }

    //第一排颜色
    tr:nth-child(1){
        background-color: #357188;
        color: #fff;
    }

    //第一列颜色
    tr{
        td:first-child{
            background-color: #05397d;
            color: #fff;
        }
    }
}
</style>