CSS实现文件夹轮廓：右上角显示异常的修复方案咨询

问题原因 #

你代码里的右上角颜色偏浅，是因为:before伪元素用radial-gradient覆盖了原本的白色背景，渐变里的透明区域（#0000）导致下方元素透出来，再加上边框衔接不完整，视觉上就显得颜色偏浅。不需要完全重写，调整几个关键样式就能解决。

修复后的SCSS代码 #

.wrapper_folder {
    @include folder;
}

@mixin folder {
    height: 348px;
    width: clamp(150px, 100%, 466px);
    position: absolute;
    border-radius: 23px;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    background-color: white; // 给容器加白色背景，避免透色

    &::after {
        bottom: 0;
        content: '';
        height: 306px;
        position: absolute;
        border-radius: 23px;
        background-color: white;
        width: clamp(150px, 100%, 466px);
        border-top: 1px solid black;
        border-right: 1px solid black;
        z-index: 0; // 调整层级，让:after在:before下方
    }
    &::before {
        top: 0; // 对齐顶部边框
        z-index: 1;
        content: '';
        height: 42px; // 和folder_name高度匹配
        position: absolute;
        width: calc(50% + 23px); // 适配圆角大小
        background-color: white;
        // 只在右上角做圆角切割，保留白色背景
        background-image: radial-gradient(circle 23px at top right, transparent 95%, white 96%);
        background-repeat: no-repeat;
        background-position: top right;
        // 加上边框，和其他部分衔接
        border-top: 1px solid black;
        border-right: 1px solid black;
        border-top-right-radius: 23px; // 匹配整体圆角
    }

    & > .folder_name {
        @include folderName;
    }
    & > .folder_box {
        @include folderBox;
    }
}

@mixin folderName {
    z-index: 2; // 确保文字在最上层
    height: 42px;
    display: flex;
    position: relative;
    text-align: center;
    width: calc(50% - 3px);
    flex-direction: column;
    justify-content: center;
    background-color: white;
    border-top: 1px solid black;
    border-top-left-radius: 23px; // 匹配容器左侧圆角

    & > p{
        margin-top: 0; // 调整margin让文字居中
        margin-left: 0;
    }
}

@mixin folderBox {
    background-color: white;
    height: calc(100% - 42px); // 给内容区设置高度
    border-radius: 0 0 23px 23px;
}

关键修改点 #

• 给.wrapper_folder添加白色背景，防止底层透色
• 调整:before伪元素的位置、尺寸，加上对应的边框和圆角，让它和整体轮廓完美衔接
• 重新设置:before的渐变逻辑，只做右上角的圆角切割，保留白色背景避免透色
• 修正folder_name的margin，让文字正常居中，同时提高层级确保显示优先级
• 给folder_box设置高度和底部圆角，完善整体结构

对应的HTML（无需修改） #

<div class="wrapper_folder three_folder">
    <div class="folder_name">
        <p class="folder_name_title">folder</p>
   </div>
    <div class="folder_box">
        <span class="folder_box_description"></span>
    </div>
</div>

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