Child div 在较小的 parent 中（div 与 CSS 转换）

Question

呼唤 CSS 大师！

我从 https://developer.wordpress.com/calypso/

看到的英雄图片中复制这个想法并不感到羞耻

在这里查看截图 1，它有一个 parent（蓝色背景），parent 有一个 css 变换来实现倾斜角度：

transform: skewY(-30deg)

角parentdiv里面有个childdiv-电脑屏幕。

我想用原创设计复制这个概念。

见下面两张图片。

我有一张波浪的 SVG 图像，它应该作为有角度的 parent div 内的背景，效果就像有角度的 parent 充满水一样。

问题：child div 是否可以基于具有形状变换的 parent 溢出而被 css 隐藏？

我希望波浪 SVG 图像向顶部和右侧（从底部和左侧）上升到 "fill up" 水。所以 child 在 parent 内部移动，而 child 唯一可见的部分在 parent 内部。 WordPress Calypso 网站本身有非常复杂的 CSS 规则并且很难复制。

如果有人能在层次和样式方面为我指明正确的方向，我将永远感激不已。

到目前为止，我对自己的努力感到有点惭愧，但这里有一个 jsfiddle：https://jsfiddle.net/deuvg7mh/

CSS

.hero-img{
  margin: 0;  
  color: #efefef;
  overflow:hidden;
  position: relative;
  height: 500px;
  width: 1500px;
}

.hero-img::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  height: 100%;
  width:100%;
  transform: skewY(-20deg);
  background: #4e7d90;
  transform-origin: bottom left;
  z-index: -1;
}

.inner-hero{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#water{
  position: absolute;
  border: 5px solid red;
  top: 0;
  background: url(wave3.svg);
  background-repeat: no-repeat;
  background-position: 10px 10px;
  width: 100%;
  height: 100%;
}

HTML

<div class="hero-img">
  <div class="inner-hero">
  <div id="water">  </div>  
</div>

如果任何有才华的 CSS 开发人员可以帮助确定 parent 的 parent 和基本 CSS 规则 child 隐藏在 parent 中的溢出css变形，你就是英雄。

Answer 1

Here's a fiddle

问题是，您正在转换 after 伪元素，而不是真正的父元素。

我在这里所做的是将 transform 从伪元素移动到父元素，并 "negate" 它在子元素中 - div

.hero-img{
//....
 transform: skewY(-20deg);
 transform-origin: bottom left;
}
.inner-hero{
 //....
 transform: skewY(20deg);
 transform-origin: bottom left;
}

希望这能解决您的问题

Child div 在较小的 parent 中（div 与 CSS 转换）

Child div inside a smaller parent (div with CSS transform)

css

svg

z-index

overflow

css-transforms