如何在styled-components样式的div中绘制十字图形？

AI 小北

2026-7-22

解决方案：用双伪元素实现十字对角线

你可以通过**:before和:after两个伪元素**分别绘制两条对角线，调整旋转角度和变换原点就能避免位置异常。以下是修改后的完整StyledCell代码：

export const StyledCell = styled.div`
    width: auto;
    background: rgba(${props => props.color}, 0.1);
    border: ${props => (props.type === 0 ? '0px solid' : '4px solid')};
    border-bottom-color: rgba(${props => props.color}, 0.5);
    border-right-color: rgba(${props => props.color}, 1);
    border-top-color: rgba(${props => props.color}, 1);
    border-left-color: rgba(${props => props.color}, 0.7);
    position: relative;

    /* 左上到右下的对角线 */
    &:after{
        content:"";
        position:absolute;
        border-top:1px solid red;
        width: calc(100% * 1.414); /* 对角线长度=边长×√2，适配容器尺寸 */
        top: 0;
        left: 0;
        transform: rotate(45deg);
        transform-origin: 0% 0%; /* 以左上角为旋转原点 */
    }

    /* 右上到左下的对角线 */
    &:before{
        content:"";
        position:absolute;
        border-top:1px solid red;
        width: calc(100% * 1.414);
        top: 0;
        right: 0;
        transform: rotate(-45deg);
        transform-origin: 100% 0%; /* 以右上角为旋转原点 */
    }
`;