三角形状的自举立柱

Question

我可以听到这个问题哑巴，但请与我合作。我会尽可能干净地解释它。

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

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

我试图找出是firstCol & secondCol应该是形如图像中的直角三角形。

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

Answer 1

This或this可能会对您有所帮助。

*{ 
 
    box-sizing:border-box; 
 
    margin:0; 
 
    padding:0; 
 
    position:relative; 
 
} 
 

 
html,body{ 
 
    min-height:100%; 
 
} 
 
    
 
.container{ 
 
    overflow:hidden; 
 
    height:100vh; 
 
    width:100vw; 
 
} 
 
    
 
.shaped{ 
 
    height:100vh; 
 
    width:40vw; 
 
    float:right; 
 
    background:black; 
 
    -webkit-clip-path:polygon(0 0,100% 0,100% 100%,30% 100%); 
 
    -webkit-shape-margin:20px; 
 
} 
 

 
.content{ 
 
    padding:30px; 
 
    color:black; 
 
    font-size:15px; 
 
    text-align:justify; 
 
} 
 

 
.content h1{ 
 
    font-size:90px; 
 
    line-height:1; 
 
    float:left; 
 
    width:350px; 
 
    height:100vh; 
 
    margin-top:0; 
 
    padding-top:20px; 
 
    -webkit-shape-outside:polygon(0 0,100% 0,40% 100%,0 100%); 
 
    shape-outside:polygon(0 0,100% 0,40% 100%,0 100%); 
 
} 
 

 
.content h1 span{ 
 
    font-size:.7em; 
 
    display:inline-block; 
 
    margin-right:-30px; 
 
}

<div class="container"> 
 
<div class="shaped"></div> 
 
<div class="content"> 
 
<h1><span>La</span> Tour <br/>Eiffel</h1> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis tempor rutrum. Sed eu odio rhoncus, molestie sapien eget, hendrerit elit. Aliquam at tellus a dui lacinia euismod a et dolor. Integer tempor leo ac quam sodales, sit amet sollicitudin risus facilisis. Donec sed purus non sapien consequat egestas. Curabitur laoreet aliquam leo, id vestibulum dui ornare sed. Nullam lectus felis, malesuada ac congue quis, suscipit vel ante. Mauris id tristique dui, quis malesuada enim. Curabitur neque quam, pellentesque ut libero sed, aliquam malesuada ligula. Donec accumsan augue nec dolor tincidunt, at sollicitudin dui scelerisque. Praesent quis dui quis lorem semper tempor eget porttitor leo.</p> 
 
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam a dapibus mi, vel adipiscing lacus. Vivamus adipiscing urna eget ligula gravida, nec ultrices lorem tincidunt. Pellentesque arcu nulla, viverra ut dui et, fermentum gravida justo. Nullam eget ligula quis ligula convallis fringilla et vitae ligula. Sed ornare metus dictum, consectetur urna in, iaculis magna. Ut purus nibh, pretium id placerat sit amet, interdum ornare eros. Etiam ac viverra lectus, in gravida orci. Phasellus aliquam sapien vitae porttitor volutpat.</p> 
 
<p>Nunc eu neque congue, aliquam nulla id, sagittis magna. Integer suscipit vulputate neque, placerat mattis ipsum congue at. Nam nec erat egestas, ullamcorper tellus id, fermentum diam. Nunc vestibulum massa eu metus hendrerit, quis consequat tellus tempus. Fusce mattis justo quis facilisis aliquet. Phasellus odio nibh, molestie eget leo a, pellentesque placerat lectus. Praesent est orci, dictum quis nibh a, vulputate vestibulum magna. Praesent cursus quam id dolor rutrum condimentum. Donec luctus lacus elit, at tincidunt massa ornare ac. Sed facilisis imperdiet nibh et adipiscing. Cras a tortor vitae sapien pellentesque iaculis in eu lorem. Integer fermentum eros libero, at dictum eros vestibulum non. Donec ac lectus urna. Praesent luctus purus sed ante vulputate convallis. Suspendisse tincidunt, purus in hendrerit ornare, felis risus mattis augue, non gravida turpis erat id ante.</p> 
 
</div> 
 
</div>