技术求助：如何让文本仅覆盖首个clip-path区域且位于其上方？

要实现文本仅在左侧蓝色clip-path区域内显示，且位于区域上方而非容器底部，只需针对文本容器的宽度限制和布局方式做调整，具体修改如下：

核心调整点 #

• 给文本容器设置最大宽度，匹配蓝色clip-path的右边界（59%），彻底避免文本延伸到右侧红色区域
• 把父容器的垂直对齐从items-center改成items-start，让文本靠上显示
• 修正原代码里的拼写错误和无效Tailwind类

修改后的完整代码 #

CSS 部分 #

.content {
    position: relative;
    z-index: 1;
    color: black;
    padding: 20px;
    margin: 0;
    box-sizing: border-box;
}

.text-container {
    position: relative;
    z-index: 2;
    max-width: 59%; /* 严格匹配蓝色clip-path的右边界 */
}

.content::before,
.content::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
}

.content::before {
    background-color: #0A76E3;
    clip-path: polygon(0 0, 59% 0, 46% 100%, 0 100%);
    left: 0;
    right: 0;
    z-index: -1;
}

.content::after {
    background-color: #ff4200;
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 100% 0);
    right: 0;
    width: 20%;
}

HTML 部分 #

<script src="https://cdn.tailwindcss.com"></script>
<div class="content h-screen">
    <!-- 修正拼写错误paddding-top为padding-top，垂直对齐改为items-start -->
    <div style="padding-top: 22rem;" class='flex pt-20 justify-start items-start px-0 mx-auto'>
        <!-- 替换无效类w-g2/5为w-3/5，配合max-width限制文本范围 -->
        <div class="text-container flex flex-col justify-start w-3/5">
            <div class="flex items-center justify-start gap-4 pb-4">
                <h2 class="text-6xl font-extrabold text-white">Who Are We</h2>
            </div>
            <h3 style="font-size: 1.5rem; color: red; padding: 10px; line-height: 1.5;" class="text-3xl space-y-4 z-50">
                We are an test payment test that allows users to securely make
                and receive payments through testtest phones over the testetses. From testetst to testetste, test test test, and
                everywhere else in test, we are a team of doers on a mission to improve the payment experience for everyone.
            </h3>
        </div>
        <img class="img w-2/6 absolute bottom-0 right-0 transform -translate-x-1/2" src="../media/images/computer.png" alt="image" />
    </div>
</div>

效果说明 #

• text-container的max-width:59%完全贴合蓝色clip-path的右顶点位置，文本不会越界到红色区域
• 父容器的items-start让文本在垂直方向上靠上排列，不再居中到容器底部
• 修正了原代码里的拼写错误和无效样式类，保证所有设置正常生效

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