Question

调用CSS专家！

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

中看到的英雄形象中抄袭这个想法并不感到羞耻

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

transform: skewY(-30deg)

角度父div有一个子div - 计算机屏幕。

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

见下面的两张图片。

我有一个波浪的SVG图像，它应该作为有角度的父div内的背景，效果好像有角度的父母用水填充。

问题：基于具有形状变换的父级，是否可以使用css溢出隐藏子div？

我希望波浪SVG图像向上和向右（从底部和左侧）上升到“填满”水。因此，孩子在父母内部移动，而孩子中唯一可见的部分在父母内部。 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开发人员可以帮助识别父母和基本的CSS规则，这些规则隐藏在带有css形状变换的父级内部的溢出中，那么你就是英雄。

Answer 1

Here's a fiddle

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

我在这里做的是将transform从伪元素移动到父元素，＆＃34;否定＆＃34;它在child-div中

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

希望这能解决你的问题

较小父级内的子div（使用CSS转换的div）

1 个答案: