html - 创建一个切入另一个 div 的透明 div

Question

我有两个 div 彼此重叠。我需要底部 div 具有这样的倾斜 Angular :

我只需要蓝色 div 顶部倾斜的帮助，我可以自己处理底部倾斜。

我可以创建一个伪元素并倾斜它，但问题是蓝色 div 有一个渐变，而制作一个具有相同渐变的伪元素会使这两个元素无法与其渐变一起流动。

我认为我唯一的解决方案是创建一个透明的 div，将其倾斜并将其放在蓝色 div 的顶部。我想知道这是否有可能创建一个倾斜的透明 div 并将其切入蓝色 div，倾斜蓝色 div，同时在背景中显示图像。

我愿意接受任何其他想法来实现这个倾斜的 div。

我创建了一个简单的 jsfiddle任何人都可以随意使用 div。

这是基本标记:

<div class="main">
  <div class="main-top">

  </div>

  <div class="main-bottom">

  </div>
</div>

.main-top  {
  background: url("http://stock-wallpapers.com/wp-content/uploads/2015/01/Huawei_P7_home_wallpaper_02_.jpg") center center no-repeat;
    background-size: cover;
    height: 300px;
    width: 600px;
}

.main-bottom {
  height: 300px;
  width: 600px;
  background-image: -moz-linear-gradient( -51deg, rgb(28,35,80) 0%, rgb(27,31,71) 41%, rgb(25,26,62) 100%);
  background-image: -webkit-linear-gradient( -51deg, rgb(28,35,80) 0%, rgb(27,31,71) 41%, rgb(25,26,62) 100%);
  position: relative;
  top: -150px;
}

谢谢

Answer 1

如果你使用这个网站，其实很容易

http://bennettfeely.com/clippy/

.main-top {
  background: url("http://stock-wallpapers.com/wp-content/uploads/2015/01/Huawei_P7_home_wallpaper_02_.jpg") center center no-repeat;
  background-size: cover;
  height: 300px;
  width: 600px;
}

.main-bottom {
  height: 300px;
  width: 600px;
  background-image: -moz-linear-gradient( -51deg, rgb(28, 35, 80) 0%, rgb(27, 31, 71) 41%, rgb(25, 26, 62) 100%);
  background-image: -webkit-linear-gradient( -51deg, rgb(28, 35, 80) 0%, rgb(27, 31, 71) 41%, rgb(25, 26, 62) 100%);
  position: relative;
  top: -150px;
  -webkit-clip-path: polygon(0 0, 100% 32%, 100% 100%, 0 68%);
  clip-path: polygon(0 0, 100% 32%, 100% 100%, 0 68%);
}

<div class="main">
  <div class="main-top">

  </div>

  <div class="main-bottom">

  </div>
</div>