Javascript 三角形引导列

我问这个问题可能听起来很傻，但请配合我。我会尽可能清楚地解释它

我有一个引导行，其中有两列。像这样

<div class="container-fluid">
    <div class="row">
        <div class="col firstCol"> Hello, </div>
        <div class="col secondCol"> World & </div>
    </div>
</div>

你好
世界,

我想弄清楚的是，第一列和第二列应该是直角三角形，形状如图所示。

我知道我们可以旋转该列，但该列中的内容也会旋转，但我不想这样。我在这里完全是一片空白，我正在寻求帮助来开始实施这项计划

或者可能会帮助你

*{
框大小：边框框；
保证金：0；
填充：0；
位置：相对位置；
}
html，正文{
最小高度：100%；
}
.集装箱{
溢出：隐藏；
高度：100vh；
宽度：100vw；
}
.成形{
高度：100vh；
宽度：40vw；
浮动：对；
背景：黑色；
-webkit剪辑路径：多边形（0 0100%0100%100%，30%100%）；
-webkit形状边距：20px；
}
.内容{
填充：30px；
颜色：黑色；
字体大小：15px；
文本对齐：对齐；
}
.内容h1{
字体大小：90px；
线高：1；
浮动：左；
宽度：350px；
高度：100vh；
边际上限：0；
填充顶部：20px；
-webkit外部形状：多边形（0.0100%0,40%100%，0.100%）；
外部形状：多边形（0.0100%0,40%100%，0.100%）；
}
.内容h1跨度{
字体大小：.7em；
显示：内联块；
右边距：-30px；
}

拉图尔
埃菲尔
Lorem ipsum dolor sit amet，是一位杰出的献身者。颞叶悬钩子。欧洲的奥迪奥·朗卡斯、莫莱斯蒂·萨皮恩·埃吉特、亨德雷特·艾利特。我在一个酒杯上喝了一杯。整只狮子座的狮子座，坐在沙发上。不要用非智人的食物。拉奥里特·阿利奎姆·利奥，我的前庭有两个房间。猫科动物之路，马莱苏亚达·ac·康格·奎斯（malesuada ac congue quis），安全等级。毛里斯·伊德·特里斯蒂克·杜伊（Mauris id tristique dui），马莱苏达·埃尼姆（quis malesuada enim）。库拉比图尔·内克·夸姆，佩伦特斯式自由主义者，阿利夸姆·马莱苏达·利古拉。在索尔利西图丁酒馆的权杖上，不要把奥古斯·内克·多洛·廷西杜特的名字记下来。我的朋友们，我的朋友们，我的朋友们，我的朋友们，我的朋友们

在faucibus中，Interdum和malesuada在第一次同侧前就出名了。这是一个巨大的缺口。妊娠期妇女的生活，不需要额外的知识。佩伦茨克是一个无名氏，维韦拉是一个酒后驾车者，发酵期孕妇是一个酒后驾车者。这是一种新的生活方式。这是我的名言，是我的信仰。但是，我的心，我的心，我的心，我的心，我的心。Etiam ac viverra lectus，在孕妇orci中。绿僵菌属（Phasellus aliquam sapien vita porttitor pat）

Nunc eu neque congue、aliquam nulla id、大射手座。整型阴囊，位于同侧阴囊。不，不，不，不，发酵直径。前庭是一个巨大的前庭，它是一个巨大的前庭。这是一个很好的例子。Phasellus odio nibh，molestie eget leo a，pellentesque placerat lectus。这是奥奇的预言，它的格言是大前庭。红葡萄酒调味品。Donec luctus lacus elit，位于马萨奥纳雷公园，设施不安全。在欧盟的传说中，这是一个智慧的玉米饼。整型酵母菌的爱欲自由，在格言爱欲前庭非。请不要选择乌纳。在排卵期前进行催产素注射。Suspendisse tincidunt，hendrerit ornare的purus，felis risus mattis augue，非孕妇turpis erat id ante

我认为这是不可能的，所以我想看看这个问题的答案。您可以使用新的包装器再次旋转列中的文本，但这不会导致与您的示例相同的文本定位。是的，我知道这一点，我在问题中已经提到过。不管怎样，谢谢你的回复。我正在看，试用后会回复你。谢谢：）谢谢你的帮助：）你能试试看这个

https://stackoverflow.com/questions/44196210/shape-outside-property-not-working-at-all

问题。