javascript - 三 Angular 形的 Bootstrap 列

Question

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

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

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

我想弄清楚的是 firstCol 和 secondCol 应该像图像中那样呈直 Angular 三 Angular 形。

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

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>