HTML不规则布局

我试图用一个有趣的布局创建页面，看到我在波纹管HTML不规则布局

问题是，我不知道的接近这一目标的最佳途径。

我使用的是引导，什么我迄今所做的是：

<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）是一个形状，另一个是页面内容。

我在创建形状时遇到了麻烦，关于如何处理此问题的任何想法？

在此先感谢！

来源

2017-05-28 user3683248

就柱子而言，您正朝着正确的方向前进。对于形状，您可以通过绘制直角三角形然后将其添加到div来创建它们。 – vijayscode

这可以通过使用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是使多边形剪辑一个伟大的工具。

希望这会有所帮助！

来源

2017-05-28 19:02:06

非常感谢，这正是我一直在寻找的。 – user3683248

HTML不规则布局

回答

相关问题