Search code examples
csssvgoverflowz-indexcss-transforms

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

Calling CSS gurus!

I am not ashamed that I'm copying this idea from the hero image seen at https://developer.wordpress.com/calypso/

See screenshot image 1 here, it has a parent (blue bg), the parent has a css transform to achieve the slanted angle:

transform: skewY(-30deg)

Angle parent div has a child div inside - the computer screen. WordPress Calypso Web Design Angled header

I want to copy this concept with an original design.

See two images below.

  1. I have an SVG image of waves which should be as a background inside the angled parent div, the effect as if the angled parent is filling with water.

Question: Can a child div be hidden with css overflow based on a parent with a shape transform? Child div inside parent with CSS transform

  1. I want that waves SVG image to rise up towards the top and right (from bottom and left), to "fill up" with water. So the child moves inside the parent, whilst the only part of the child that is visible is within the parent. See final resulting image here. The WordPress Calypso site itself has insanely complicated CSS rules and is hard to copy.

If anyone can point me in the right direction in terms of layering and styles, I would be forever grateful.

I'm a bit ashamed of my effort so far, but here's a 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>

If any talented CSS developer can help identify parents and basic CSS rules for a child hidden with overflow inside a parent with a css shape transform, you'd be a hero.

Solution

  • Here's a fiddle

    The Problem was, that you were transforming the afterpseudo-element, not really the parent element.

    what i did here is move the transformfrom the pseudo element to the parent, and "negate" it in the child-div

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

    hope this solves you're problem