Learning Learning - 4 years ago 60
HTML Question

Skewing main container skews image inside how to avoid content from skewing

I need to skew the main container which is

li
but not the content inside
I am able to skew each
li
but it also skew's contents inside

.cbp-rfgrid li{
transform:skew(-25deg)
}


and when i add counter skew for image it add while triangle like shape on the corners

.cbp-rfgrid li a img {
/* transform:skew(25deg)*/
}


I have set up CodePen example

How can i skew
li
and not the content with our any white area around the image.

HTML

<ul class="cbp-rfgrid">
<!--item-->

<li>
<a href="albums/6/crisis-relief">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg">
<div>
<h3 class="album-causes-list-h3">Footbal </h3>

</div>
</a>
</li>

<li>
<a>
<img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg">
<div>
<h3 class="album-causes-list-h3">Cricket </h3>

</div>
</a>
</li>

<li>
<a href="albums/5/health">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg">
<div>
<h3 class="album-causes-list-h3">Skiing</h3>

</div>
</a>
</li>

<li>
<a>
<img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg">
<div>
<h3 class="album-causes-list-h3">Boxing </h3>

</div>
</a>
</li>

<li>
<a>
<img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg">
<div style="position: absolute; height: auto; display: block; background-color: rgba(0, 0, 0, 0);">

<div style="background-color: rgba(0, 0, 0, 0.1); "></div>

</div>

<div>
<h3 class="album-causes-list-h3">Baseball </h3>


</div>
</a>
</li>

<li>
<a>
<img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg">
<div style="position: absolute; background-color: rgba(0, 0, 0, 0.0); height: auto; display: block;">

<div style="background-color: rgba(0, 0, 0, 0.2); "></div>
</div>

<div>
<h3 class="album-causes-list-h3">Category Six </h3>

</div>
</a>
</li>

<li>
<a>
<img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg">
<div>
<h3 class="album-causes-list-h3">Category Seven</h3>
<span class="cause-count">Albums (0)</span>
</div>
</a>
</li>

<li>
<a>
<img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg">
<div>
<h3 class="album-causes-list-h3">Category EIGHT </h3>

</div>
</a>
</li>


<!--item-->
</ul>

Answer Source

When you skew the img element back to the displace the skew effect on the parent, you need to increase the size of the img element in order to compensate for the size adjustments otherwise there will be white space like you are seeing.

One option would be to scale the a element up so that the img element will increase in size and take up the extra white space.

Updated Example

.cbp-rfgrid li {
  transform:skew(-25deg)
}
.cbp-rfgrid li a {
  transform: skew(25deg) scale(1.3);
}

Alternatively you could also apply the scaling to the img element depending on what you're trying to achieve.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download