How do I fill the skewed div to fit the container?

Question

I'm trying to make an image gallery where the images are slightly skewed, but the skewed div specifically div 1 and 5 are not entirely fit the container. How do I remove the colored background so that div 1 and 5 will take the leftover spaces?

Here are my code :-

HTML

          <div className='SkillsContent'>
                <div className='SkillHolder'>
                    <div className='Expertise P1_Content'>
                        1
                    </div>
                </div>
                <div className='SkillHolder'>
                    <div className='Expertise P1_Content'>
                        2
                    </div>
                </div>
                <div className='SkillHolder'>
                    <div className='Expertise P1_Content'>
                        3
                    </div>
                </div>
                <div className='SkillHolder'>
                    <div className='Expertise P1_Content'>
                        4
                    </div>
                </div>
                <div className='SkillHolder'>
                    <div className='Expertise P1_Content'>
                        5
                    </div>
                </div>   
            </div>

CSS

.SkillsContent {
    height: 100vh;
    top:8vh;
    align-items: center;
    background-color: aquamarine;
    overflow: hidden;
    width: 100%;
    display: flex;
}

.SkillHolder {
    background-color: black;
    border-style: solid;
    border-color: white;
    color: white;
    height: 100%;
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: skewX(-10deg);   
    transition: .5s ease-in;
}

What would those images fill the space with given they are skewed? Do you definitely want all the images distorted by the skew or do you want them cropped slightly with a white band between them? — A Haworth, May 02 '23 at 06:10

score 0 · Accepted Answer · answered May 02 '23 at 08:36

I think you can get there by adding another wrapper div. The wrapper div has 100% width (as you intended), and overflow hidden. Inside, we have the normal SkillsContent div. We modify this by accounting for the additional width that is caused by the skew. We can calculate this by tan(skewAngle). Doing so will enlarge the div to account for the proper width. Then the rest should be pretty straight-forward.

.wrapper {
  --angle: 10deg;
  --myTan: tan(var(--angle));
  width: 100%;
  overflow: hidden;
}

.SkillsContent {
    top: 8vh;
    height: calc(100vh - 8vh); /* Changed to fit on screen */
    align-items: center;
    background-color: aquamarine;
    overflow: hidden;
    /*
    Scale the container to account for the skew
    Width = 100% + tan(angle)*100%
    */
    width: calc((1 + var(--myTan)) * 100%);
    /*
    Afterwards, we must reposition the containerby moving it "half way" back to the left
    By doing so, it is properly centered.
    */
    transform: translateX(calc(-1 * var(--myTan) / 2 * 100%));
    display: flex;
}

.SkillHolder {
    background-color: black;
    border-style: solid;
    border-color: white;
    color: white;
    height: 100%;
    width: 20%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    /*
    Just replaced the angle with a custom prop.
    Note that I added the "-1" as a factor here and not in the top.
    I didn't get it to work with "--angle: -10deg", because "abs(var(--angle))"
    somehow didn't work for me. But I guess it's fine as it is now :D
    */
    transform: skewX(calc(-1 * var(--angle)));
    transition: .5s ease-in;
}

<div class="wrapper">
<div class='SkillsContent'>
  <div class='SkillHolder'>
    <div class='Expertise P1_Content'>
      1
    </div>
  </div>
  <div class='SkillHolder'>
    <div class='Expertise P1_Content'>
      2
    </div>
  </div>
  <div class='SkillHolder'>
    <div class='Expertise P1_Content'>
      3
    </div>
  </div>
  <div class='SkillHolder'>
    <div class='Expertise P1_Content'>
      4
    </div>
  </div>
  <div class='SkillHolder'>
    <div class='Expertise P1_Content'>
      5
    </div>
  </div>   
</div>
</div>

How do I fill the skewed div to fit the container?

1 Answers1