求助：如何使用纯CSS为菱形添加线条并完成可复用的指定Logo制作

嘿，我来帮你搞定这个Logo的CSS实现难题！你提到的用额外<div>的方法确实存在复用性差、缩放对齐的问题，咱们可以改用单个元素+CSS变量+伪元素的方案，既能避免多余DOM，又能完美适配缩放，复用性拉满。

优化后的实现思路 #

1. 用单个容器元素作为基础，通过transform: rotate(45deg)实现旋转的正方形边框
2. 利用:before和:after伪元素分别绘制两条外部短线，结合CSS变量统一控制尺寸、边框宽度，确保缩放时所有元素比例一致
3. 所有尺寸基于变量计算，避免固定像素值导致的错位问题

完整代码实现 #

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Custom Logo Demo</title>
    <style>
        * { box-sizing: border-box; }
        .container { 
            margin: auto; 
            background-color: green; 
            min-height: 100vh; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
        }
        /* 定义CSS变量，方便统一修改和缩放 */
        .logo {
            --size: 40px; /* 正方形基础尺寸 */
            --border-width: 3px; /* 边框宽度 */
            --line-length: calc(var(--size) / 2); /* 短线长度，基于正方形尺寸计算 */
            
            width: var(--size);
            height: var(--size);
            border: var(--border-width) solid yellow;
            transform: rotate(45deg);
            position: relative;
        }
        /* 右侧上方的短线 */
        .logo::before {
            content: "";
            position: absolute;
            width: var(--line-length);
            border-top: var(--border-width) solid yellow;
            right: calc(-1 * var(--line-length));
            top: 0;
            transform: translateY(calc(var(--border-width) / -1));
        }
        /* 左侧下方的短线 */
        .logo::after {
            content: "";
            position: absolute;
            width: var(--line-length);
            border-bottom: var(--border-width) solid yellow;
            left: calc(-1 * var(--line-length));
            bottom: 0;
            transform: translateY(calc(var(--border-width) / 1));
        }
    </style>
</head>
<body>
    <section class="main-header">
        <div class="container">
            <div class="logo"></div>
        </div>
    </section>
</body>
</html>

方案优势 #

• 复用性强：只需要修改--size和--border-width两个变量，就能快速调整Logo的大小和边框粗细，适配不同场景
• 无多余DOM：仅用单个元素+两个伪元素完成绘制，结构更简洁
• 缩放无错位：所有尺寸都基于CSS变量计算，比例始终保持一致，缩放时不会出现线条对齐问题
• 易维护：样式集中在单个类中，修改和调试更方便

如果你需要调整Logo的样式，比如改变颜色、短线长度比例，只需要修改对应的变量或属性即可~

内容的提问来源于stack exchange，提问作者webdevst1