为英雄创建有角度的DIV

由 发布于

有很多与此类似的问题，但是它们是针对边缘的，或者答案与某些浏览器不兼容。我曾想过使用渐变图像作为背景，但是使用背景渐变可以达到相同的效果，我想这可能会更容易用最少的代码实现。

我目前有一个，它的边缘平坦。

.top {
  min-width: 100%;
  min-height: 400px;
	background: linear-gradient(45deg, #FF0000, #00FF00);
}

.main {
  min-width: 100%;
  min-height: 600px;
	background: #0000FF;
}
<div class="top"></div>
<div class="main"></div>

它使用最少的代码，但我的目标是在一个的底部和另一个的顶部或仅在顶部的底部形成一个倾斜的边缘，以使DIV匹配。

I'd be aiming for something like this… Example of angled DIVs

Of course I could rotate the DIV but then there's overflow. I want something clean so that both DIVs match up. Something using clip-path: polygon could work but I can't figure out the angles or implementation. Any ideas or resources for where to start would be apprecited.