如何在平行四边形元素中插入展示文本 附HTML与CSS参考代码

调整方案 #

你当前的代码存在两个核心问题：

1. 文本节点h1、p和你做了倾斜变形的#banner是同级节点，并不在平行四边形的容器范围内
2. 就算把文本放入容器，父容器的skew变形会连带子元素一起倾斜，需要反向变形矫正文本

第一步：修改HTML结构

把文本内容移入#banner内部：

<div id="herotext">
    <div id="banner">
        <h1 id="maintitle">Hey, I'm Charlie</h1>
        <p>This website contains basic HTML and CSS</p>
    </div>
</div>

第二步：修改CSS样式

#herotext {
    position: absolute;
    text-align : center;
    width: 100%; /* 新增，确保容器占满横向空间方便居中 */
}
#banner {
    position: absolute;
    width: 700px;
    height: 350px;
    /* 原skew保留，新增translateX修正居中逻辑，替换原来的margin-left */
    transform: translateX(-50%) skew(20deg);
    background: #555;
    left: 50%;
    color: #fff; /* 新增，文本设为白色方便在深色背景上查看 */
    /* 新增flex布局实现内容垂直居中 */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* 新增样式：子元素反向倾斜，抵消父容器的skew效果 */
#banner > * {
    transform: skew(-20deg);
}

调整说明

• 文本移入#banner后自然会在平行四边形容器的范围内展示
• 父容器设置flex布局后可自动实现文本的垂直居中，继承父级的text-align:center实现水平居中
• 子元素反向skew(-20deg)后，只会抵消父容器的倾斜效果，文本会保持正常水平显示
• 用translateX(-50%)做水平居中，比固定百分比的margin-left适配性更强，不会出现不同屏幕宽度下容器偏移的问题

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