Transform skew child divs but also keep them inside parent container

Question

I have a parent container width 3 (or more) child div's including images. When I skew my child divs they are bigger than the parent div so they are not nicely skewed.

I want to achieve this: goal

I have tried the following:

<div class="parent">
   <div class="child">
     <!-- Image -->
   </div>
   
   <div class="child">
     <!-- Image -->
   </div>

   <div class="child">
     <!-- Image -->
   </div>
</div>

With the following style:

.parent{
   display:flex;
   flex-wrap:wrap;
   justify-content: space-between;
}

.child{
    width:30%;
    height:375px;
    transform: skew(-45deg);
    overflow:hidden; //Because i want to insert images inside it
    transform-origin: bottom right;
    background:red;
}

But this give me not the right result

current result

So to clarify, this is what I want:

I want this

but this is what I get:

This is what I get

How is the width of the parent defined? And are .parent and .swiperwrapper the same thing? — A Haworth, Jun 01 '23 at 09:15
Do you want the children to have a fixed height as shown - because the results will be very different depending on the aspect ratio of the viewport. And what about the width of a child? Try drawing the result at different portrait/landscape settings and decide what the constraints really are. — A Haworth, Jun 01 '23 at 10:31
I want to have 3 columns inside my parent. Each column should have a width of 30% an a fixed height of 375px. Ive added new images to the post to show what the goal is. It is right that the results will be different. — Nikerstriker, Jun 01 '23 at 11:22
I want to achieve that the three children are inside the parent. Not necessarily 30% but the have to keep inside the parent div — Nikerstriker, Jun 01 '23 at 11:50
Is the height definitely fixed or is it the aspect ratio of the parent you'd like to keep fixed? — A Haworth, Jun 01 '23 at 11:58
The best thing would be if it could be done with the aspect ratio of the parent — Nikerstriker, Jun 01 '23 at 12:00
But my main question is how to get three columns inside a parent container using transform:skew on the children. — Nikerstriker, Jun 01 '23 at 12:52
You have to work out the geometry. And that depends on the aspect-ratio of the parent. — A Haworth, Jun 01 '23 at 13:40
Are you still stuck or has the linked question answered yours? — A Haworth, Jun 01 '23 at 17:00

score 0 · Answer 1 · answered Jun 05 '23 at 08:46

For a slant of 45degrees this can be achieved if we think of three red squares which are then skewed. They need to be 25% width of their parent-less-gap-allowance, not 30%, to leave enough room for the slanted part of the last child.

One way of doing this for any aspect ratio of the overall container is to separate that from the direct parent of the child elements.

This snippet has a container with the aspect ratio 1 / 1 (as given in the comments). The height has been set at 100vh just for this demo.

The parent of the children is inside it and width calculated to sit in three quarters of the overall container plus an allowance for the gap.

The gap is set as a CSS variable so it can be easily changed if required.

<style>
  * {
    box-sizing: border-box;
    margin: 0;
  }
  
  .container {
    width: 100vh;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    background: lightblue;
  }
  
  .parent {
    --gap: 10px;
    --halfgap: calc(var(--gap) / 2);
    width: calc(75% + var(--halfgap));
    display: flex;
    justify-content: space-between;
  }
  
  .child {
    width: calc(100% / 3);
    aspect-ratio: 1 / 1;
    background: red;
    border: solid 1px black;
    transform: skewX(-45deg);
    transform-origin: bottom left;
    box-sizing: border-box;
    margin: 0 var(--halfgap);
  }
  
  .child:first-child {
    margin: 0 var(--halfgap) 0 0;
  }
  
  .child:last-child {
    margin: 0 0 0 var(--halfgap);
  }
</style>
<div class="container">
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

Thanks for you help! It worked! :) There is only one more problem. Inside the child I want to add an image width object fit cover but the image should be shown horizontally so it needs to be skewed 45 deg. When I skew the image the object fit cover doesn't work anymore. — Nikerstriker, Jun 07 '23 at 09:16
You need to show the code you are using. Transforming the image will not affect the skewing of other elements, but of course you can’t have the whole width of the image being visible. — A Haworth, Jun 07 '23 at 14:42

Transform skew child divs but also keep them inside parent container

1 Answers1