我希望文本仅跨越第一个剪辑路径区域

Question

我希望文本仅跨越第一个剪辑路径区域，而不跨越右侧剪辑路径。我尝试了多次调整但没有成功。文本应该位于剪辑路径的顶部而不是容器的底部。

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

    .text-container {
        position: relative;
        z-index: 2;
    }

    .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%;
    }

  <script src="https://cdn.tailwindcss.com"></script>
<div class="content h-screen">
    <div style="paddding-top: 22rem;" class='flex flex-row-2 pt-20 justify-start items-center px- mx-auto'>
        <div class="text-container flex flex-col justify-around w-g2/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; background-clip: text; -webkit-background-clip: text; color: red; padding: 10px; display: inline-block; 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>

Answer 1

使用 shape-outside 解决了我的问题。这是造型

    .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%;
}

.text-container {
    shape-outside: polygon(0 0, 59% 0, 46% 100%, 0 100%);
    margin-right: 15%;
    width: 54%;
}