创建一个透明的div，切入另一个div

Question

我有两个div在彼此之上。我需要底部div具有这样的倾斜角度：

我只需要帮助倾斜蓝色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>