三角形狀的自舉立柱

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>