html - 如何将“shape-outside” div 浮动到位于父容器底部的文本左侧？

问题描述

我很确定这是不可能的（至少只有 HTML 和 CSS），因为我一直在到处搜索并且尝试一切都无济于事......这个问题是我最后的希望。

基本上，我有一条从容器底部到顶部的对角线（使用“shape-outside”css 属性），它浮动到上部文本的右侧。我想要的是有一个浮动到下部文本左侧的对角线的副本，但问题是通过定位下部文本，我将它从流程中取出，这意味着我不能使用浮动包装它现在。有什么技巧可以达到这种预期效果吗？

到目前为止我所拥有的

请注意，当我调整大小时，文本如何沿对角线向上环绕

我希望底部文本也一样，而不是被截断。

其他一些细节：

我正在使用剪辑路径来获得所需的左侧和右侧形状
左右两边都是 div，每个 100% 宽和高。我使用负边距让它们重叠
在左侧 div 中，我有我的“倾斜”div，它使用 shape-outside 制作对角线，以及环绕向右浮动的倾斜的文本元素。
在右侧 div 中，我在文本容器上使用绝对定位，将其定位在距父 div 底部 0px 的位置，但这是有问题的，因为现在它不能环绕浮动元素（在我的情况下是对角线）

希望有人对此有诀窍！

编辑：代码

注意：我将 riotjs 用于自定义标签，但我还没有向它们添加任何内容

<left>
    <div id="slant"></div>
    <bean id="fighter">
        <name>{props.fighter.name}</name>
        <bio factoids={props.fighter.factoids}></bio>
    </bean>
</left>

<right>

    <div>
        <div id="slant"></div>
        <bean id="challenger">
            <bio factoids={props.challenger.factoids}></bio>
            <name>{props.challenger.name}</name>
        </bean>
    </div>
</right>

<style>

    left {
        display: block;
        background-color: pink;
        width: 100%;
        height: 100%;
        clip-path: polygon(0 0, 80% 0, 20% 100%, 0 100%);
        margin-bottom: -100vh;
    }

    right {
        display: block;
        background-color: lightblue;
        width: 100%;
        height: 100%;
        clip-path: polygon(80% 0, 100% 0, 100% 100%, 20% 100%);
    }

    right > div {
        position: absolute;
        bottom: 0;
        right: 0;
    }
    right > div > bean {
        text-align: right;
        width: 100%;
    }

    left #slant {
        shape-outside: polygon(80% 0, 20% 100%);
        float: right;
        width: 100%;
        height: 100%;
    }

    h3, ul {
        margin: 0;
    }
</style>

标签： htmlcss

html - 如何将“shape-outside” div 浮动到位于父容器底部的文本左侧？

问题描述

解决方案

推荐阅读