如何让倾斜的Div适配容器？解决首尾Div无法填满容器问题

问题原因 #

使用transform: skewX(-10deg)后，元素的视觉形状会倾斜，但元素的实际占位仍为原始矩形。首尾的SkillHolder倾斜后，左右边缘向内收缩，导致容器背景色从两侧露出，无法填满空间。

解决方案一：仅内部内容倾斜（推荐） #

如果只需要图片/文字等内部内容有倾斜效果，外层容器保持矩形填满空间，可通过反向倾斜内部元素实现：

修改后的CSS #

.SkillsContent {
    height: 100vh;
    top: 8vh;
    align-items: center;
    background-color: aquamarine;
    overflow: hidden;
    width: 100%;
    display: flex;
}

.SkillHolder {
    background-color: black;
    border-style: solid;
    border-color: white;
    color: white;
    height: 100%;
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .5s ease-in;
    /* 移除外层的skew，让容器保持矩形填满空间 */
}

.Expertise {
    transform: skewX(-10deg); /* 内部内容设置倾斜 */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

这种方法不需要调整首尾元素，外层SkillHolder自然填满容器，同时内部内容保持倾斜效果，完全解决背景色露出的问题。

解决方案二：让整个SkillHolder（含边框）倾斜 #

如果需要整个SkillHolder（包括边框）都倾斜，可通过调整首尾元素的宽度和偏移，结合容器的overflow:hidden裁剪超出部分：

步骤1：给首尾元素添加专属类 #

修改HTML，给第一个和最后一个SkillHolder分别添加first和last类：

<div className='SkillsContent'>
    <div className='SkillHolder first'>
        <div className='Expertise P1_Content'>1</div>
    </div>
    <div className='SkillHolder'>
        <div className='Expertise P1_Content'>2</div>
    </div>
    <div className='SkillHolder'>
        <div className='Expertise P1_Content'>3</div>
    </div>
    <div className='SkillHolder'>
        <div className='Expertise P1_Content'>4</div>
    </div>
    <div className='SkillHolder last'>
        <div className='Expertise P1_Content'>5</div>
    </div>   
</div>

步骤2：添加CSS调整首尾元素 #

.SkillsContent {
    height: 100vh;
    top: 8vh;
    align-items: center;
    background-color: aquamarine;
    overflow: hidden;
    width: 100%;
    display: flex;
}

.SkillHolder {
    background-color: black;
    border-style: solid;
    border-color: white;
    color: white;
    height: 100%;
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: skewX(-10deg);   
    transition: .5s ease-in;
}

/* 调整第一个元素，向左偏移并增加宽度，抵消倾斜后的左侧空隙 */
.SkillHolder.first {
    margin-left: calc(-100% * tan(10deg));
    width: calc(20% + 100% * tan(10deg));
    transform-origin: right center;
}

/* 调整最后一个元素，向右偏移并增加宽度，抵消倾斜后的右侧空隙 */
.SkillHolder.last {
    margin-right: calc(-100% * tan(10deg));
    width: calc(20% + 100% * tan(10deg));
    transform-origin: left center;
}

通过calc计算倾斜角度对应的宽度补偿，结合transform-origin确保倾斜中心正确，再利用容器的overflow:hidden裁剪超出部分，让首尾元素完全填满容器两侧。

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