CODEWITHSUNDEEP
jqueryhtmlcssskew
finners
finners

Reputation: 885

Make background images inside skewed container appear un-skewed

I've got a carousel (slick) that's displaying various slides that I've skewed by -10% to create a diagonal effect. However the content inside of it is also skewed. Is there a solution to un-skew just the content and background image but preserve the diagonal effect on the slide container?

Jsfiddle here - https://jsfiddle.net/czcjt3no/1/

  <div class="section">
  <div class="grid poly--holder">
    <div class="poly-item">
      <div class="poly-item__content" style="background-image: url(https://unsplash.it/1000/1000/?random);">sdsfsdsfsdsdfjsdkjfskds</div>
    </div>
    <div class="poly-item">
      <div class="poly-item__content" style="background-image: url(https://unsplash.it/1100/1000/?random);">sdsfsdsfsdsdfjsdkjfskds</div>
    </div>
    <div class="poly-item">
      <div class="poly-item__content" style="background-image: url(https://unsplash.it/1200/1000/?random);">sdsfsdsfsdsdfjsdkjfskds</div>
    </div>
    <div class="poly-item">
      <div class="poly-item__content" style="background-image: url(https://unsplash.it/1300/1000/?random);">sdsfsdsfsdsdfjsdkjfskds</div>
    </div>
    <div class="poly-item">
      <div class="poly-item__content" style="background-image: url(https://unsplash.it/1400/1000/?random);">sdsfsdsfsdsdfjsdkjfskds</div>
    </div>
  </div>
</div>

.poly--holder {
 overflow: hidden;

 .poly-item {
   box-sizing: border-box;
   margin: 0;
   transform: skewX(-10deg);
   height: 400px;

   .poly-item__content {
     transform: skewX(10deg);
     background-size: cover;
     background-position: 50%;
     height: 100%;
   }
}

}

Upvotes: 1

Views: 1078

Answers (2)

Laurens
Laurens

Reputation: 11

I see that you have put hardcoded values for left and width, here is an updated version with calculated left and widtdh:

/* Calculate how much wider the image is than the original image after skewing it */
function calcSkewWidth(degrees, height) {
  return Math.tan(degrees * Math.PI / 180) * height;
}

window.addEventListener('load', (event) => {
  [...document.querySelectorAll('img')].forEach(img => {
    const skewWidth = calcSkewWidth(12, img.offsetHeight);
    img.style.width = `calc(100% + ${skewWidth * 2}px)`;
    img.style.left = `-${skewWidth / 2}px`
  })
});

https://jsfiddle.net/70rombdv

Upvotes: 1

GuCier
GuCier

Reputation: 7405

If you skew the container you have to reverse-skew the content.

Skew is a transformation to the whole DOM node, meaning all it's children will be transformed at once : you cannot stop propagation.

.parent{
  transform: skewX(-10deg);
}

.child {
  transform: skewX(10deg);
}

Here is your updated fiddle

Upvotes: 0

Related Questions