如何用div和CSS模拟表格的对角线效果？

使用CSS的::before伪元素和linear-gradient可以实现div对角线效果。

要使用div和CSS模拟表格对角线，我们可以利用CSS的伪元素::before或::after来创建线条，以下是一个简单的示例：

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Div CSS 模拟表格对角线</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="table">
        <div class="row">
            <div class="cell">1</div>
            <div class="cell">2</div>
            <div class="cell">3</div>
        </div>
        <div class="row">
            <div class="cell">4</div>
            <div class="cell">5</div>
            <div class="cell">6</div>
        </div>
        <div class="row">
            <div class="cell">7</div>
            <div class="cell">8</div>
            <div class="cell">9</div>
        </div>
    </div>
</body>
</html>

CSS代码（styles.css）：

.table {
    display: flex;
    flex-direction: column;
}
.row {
    display: flex;
}
.cell {
    width: 50px;
    height: 50px;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.cell::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 1px solid red;
    z-index: -1;
}
.cell:nth-child(odd)::before {
    transform: rotate(45deg);
}
.cell:nth-child(even)::before {
    transform: rotate(-45deg);
}

在这个示例中，我们创建了一个包含3行3列的表格，每个单元格都有一个边框，我们使用CSS伪元素::before在每个单元格上添加了一条红色线条，通过调整transform属性，我们可以使奇数行和偶数行的单元格具有不同的旋转角度，从而形成对角线效果。