创建一个切入另一个 div 的透明 div答案

【问题标题】：Create a transparent div that cuts into another div创建一个切入另一个 div 的透明 div
【发布时间】：2017-08-31 20:46:33
【问题描述】：

我有两个相互重叠的 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;
}

谢谢

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：