我有一個父容器寬度3(或更多)包括圖像的子div。當我傾斜我的子div時，它們比父div大，所以傾斜得不太好。

我想實現這個目標:

我嘗試了以下方法:

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

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

具有以下樣式:

.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;
}

但是這給我的不是正確的結果

所以澄清一下，這是我想要的:

但這是我得到的:

對于45度的傾斜，如果我們想到三個紅色方塊，然后將它們傾斜，這就可以實現。它們需要是其無父母ga p-allowance寬度的25%，而不是30%，以便為最后一個孩子的傾斜部分留出足夠的空間。

對于整個容器的任何縱橫比，一種方法是將其與子元素的直接父元素分開。

這個代碼片段有一個長寬比為1 / 1的容器(如注釋中所給)。僅為了這個演示，高度被設置為100vh。

子容器的父容器在容器內部，寬度計算為整個容器的四分之三，加上間隙余量。

間隙被設置為一個CSS變量，因此如果需要可以很容易地更改它。

<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>