CSS中如何优雅地在正方形内绘制一条对角线？

在CSS中，你可以使用多种方法在正方形内绘制一条对角线。以下是几种常见且优雅的实现方式：

方法1：使用 ::before 或 ::after 伪元素

通过伪元素和 transform 属性，你可以轻松地在正方形内绘制一条对角线。

.square {
    width: 100px;
    height: 100px;
    background-color: #ccc;
    position: relative;
}

.square::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-bottom: 2px solid black;
    transform: rotate(45deg);
    transform-origin: 0 0;
}

方法2：使用 linear-gradient

通过 linear-gradient 背景属性，你可以直接在正方形内绘制一条对角线。

.square {
    width: 100px;
    height: 100px;
    background: linear-gradient(to bottom right, transparent 49.5%, black 49.5%, black 50.5%, transparent 50.5%);
}

方法3：使用 clip-path

clip-path 属性可以用来裁剪元素，从而绘制对角线。

.square {
    width: 100px;
    height: 100px;
    background-color: #ccc;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}

方法4：使用 SVG

如果你需要更复杂的图形，可以考虑使用内联SVG。

<div class="square">
    <svg width="100" height="100">
        <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2" />
    </svg>
</div>

方法5：使用 border 和 transform

通过调整边框和旋转，你也可以实现对角线的效果。

.square {
    width: 100px;
    height: 100px;
    background-color: #ccc;
    position: relative;
}

.square::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 141.42%; /* 100% * sqrt(2) */
    height: 2px;
    background-color: black;
    transform: rotate(45deg);
    transform-origin: 0 0;
}

总结

以上方法各有优缺点，选择哪种方法取决于你的具体需求。如果你需要简单的对角线，linear-gradient 或 ::before 伪元素可能是最简洁的选择。如果你需要更复杂的图形，clip-path 或 SVG 可能更适合。