为英雄创建有角度的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.

评论
  • msed
    msed 回复

    您可以在第一个div中添加另一个渐变来模拟此效果:

    .top {
      min-width: 100%;
      min-height: 400px;
      background: 
        linear-gradient(to bottom left, transparent 49.5%, #0000FF 50%) 
          bottom/100% 25px /* adjust the 25px to control the angle */ 
          no-repeat, 
        linear-gradient(45deg, #FF0000, #00FF00);
    }
    
    .main {
      min-width: 100%;
      min-height: 600px;
      background: #0000FF;
    }
    <div class="top"></div>
    <div class="main"></div>