jquery - HTML不规则布局

我试图用有趣的布局创建页面，请参见下面

Example of the layout intented

我遇到的问题是我不确定解决此问题的最佳方法。

我正在使用引导程序，到目前为止我所做的是：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-4" id="shapes" style="background: #FFF">
    <h1>Here's where the shapes will happen.</h1>
  </div>
  <div class="col-md-6" id="content" style="background: #999">
    <h1>page content</h1>
  </div>
</div>

我的想法是创建2列，左边的较小一列（col-md-4）是成形的列，另一列是页面内容。

我在创建形状时遇到麻烦，关于如何解决这个问题有任何想法吗？

提前致谢！

最佳答案

这可以通过使用bootstrap grid并排放置两个div，然后使用clip-path: polygon(工具将div裁剪为所需的方式来完成。例

#shapes {
  -webkit-clip-path: polygon(100% 0, 94% 16%, 98% 37%, 93% 59%, 100% 91%, 100% 100%, 0 100%, 0 0);
  clip-path: polygon(100% 0, 94% 16%, 98% 37%, 93% 59%, 100% 91%, 100% 100%, 0 100%, 0 0);
  background: #323232;
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-6" id="shapes">
      <h1>Here's where the shapes will happen.</h1>
    </div>
    <div class="col-xs-6" id="content">
      <h1>page content</h1>
    </div>
  </div>
</div>

Clippy是制作多边形剪辑的绝佳工具。

希望这可以帮助！

关于jquery - HTML不规则布局，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44230808/