Achieve a straightened appearance for background images within a skewed container

Can I un-skew the content inside a skewed carousel, while preserving the diagonal effect on the slide container?

Check out the Jsfiddle example 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%;
   }
}

}

jqueryhtmlcssskew

Answer №1

It appears that hardcoded values for left and width were initially used, but I have revised the code to include calculated left and width measurements:

/* Function to calculate the difference in width after skewing an image */
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`
  })
});

Check out the updated version here

Answer №2

To maintain the proper appearance, if you tilt the container one way, you must tilt the content in the opposite direction.

When skewing, the transformation affects the entire DOM node, causing all of its children to be skewed simultaneously without the ability to selectively apply the transformation.

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

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

Check out the updated fiddle here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there anyone who can provide an explanation for this code snippet?

$.post("include/email_validate.inc.php", { email: $('#email').val() }, function(response){ if(response=="email_exits") { alert("E-mail Address Already Registered"); return false; } ...

phpjqueryajax

Difficulty arises when attempting to remove a node using Html Agility Pack

After successfully installing the Html Agility Pack to my asp.net project, I have been able to extract data from a different web page and display it without any issues. However, I am currently facing a problem. I have identified a div with the id of header ...

jqueryhtmlcssasp.nethtml-agility-pack

Floating Horizontal Grid Scroll Bar

My online store is powered by Magento. One issue I am encountering is with the default horizontal scroll bar in the admin grids. It becomes difficult to use when the number of rows extends beyond the visible page in the browser. For instance, when I go t ...

jqueryhtmlcssmagento

How to successfully close a jQuery dialog within a user control

My user control has a list view with a hyperlink (LnkDelete) that triggers a jQuery dialog. Here is the javascript code responsible for this functionality: $('#LnkDelete').live('click', function (e) { var page = $(this).at ...

javascriptjqueryasp.netjquery-uimodal-dialog

Updating / modifying code in a document using a Query

Just wondering, is it feasible to create a form that can be filled out to either write new code or replace existing code in a file? For instance, I have a result table with various outcomes. Rather than resorting to using a database or manually updating t ...

javascriptphpjquerysqlforms

Enable the text to wrap around an interactive object that the user can freely manipulate

Looking for a solution where I can have a floating div that can be moved up and down using javascript while the text wraps around it seamlessly. Similar to how an object positioned in a word document behaves, I want the text to flow around the div both ab ...

javascripthtmlcsscss-float

Exploring keypad.js and the use of serialization in conjunction with $.post

Currently delving into the realm of jQuery as I work on a website for employees. The goal is to grant entry through a unique keypad code assigned to each employee. However, my progress hit a snag when I stumbled upon this script and struggled to get it to ...

jqueryserialization

What causes the closure variable to be reset after iterating over JSON data using $.each method?

Take a look at this scenario: var elements = []; $.getJSON(data_url, function(result) { $.each(result, function(key, value) { elements.push(parser.read(value.data)); // at this point, "elements" contains items }); }); dataLayer.addElements( ...

javascriptjqueryjsonclosures

The debate between using multiple modals or a single overwritable modal remains a

I am in the process of creating a webpage that will contain multiple elements. For example, it could be a gallery of books where clicking on a thumbnail opens a modal with the book's image, a link to the publisher (or personal book page), and a descri ...

javascripthtmlbootstrap-4bootstrap-modal

Is there a way to set a maximum width for a div and have a scroll bar appear if the contents exceed that width?

I am dynamically adding divs inside #maindiv, and I am never quite sure how many inner divs will end up inside it. Each inner div has a width of 160px. The CSS I'm using for #maindiv is as follows: #maindiv { overflow: auto; width: 640px; ...

htmlcss

Is it feasible to incorporate callbacks in CSS3 animations?

I've been searching for a way to use CSS3 animations with callbacks. Is it possible to animate one element and then trigger the animation of another once the first one is finished? I've spent hours on Google trying to find an answer, but maybe I ...

animationcsscallback

jQuery disregards the else-if statement

Currently, I am developing a web application that prompts the user to input an "application" by providing the StudentID and JobID. With the help of jQuery, I am able to notify the user if the student or job entered does not exist, if the application is alr ...

javascriptjqueryif-statement

What's the most effective method for setting up this header using the flex grid system?

I have been able to arrange the logo, search bar, and text in different columns, but I'm struggling to figure out how to position the <nav> below the search bar while maintaining the height consistency with the logo. #outer {} #logo { ...

htmlcssflexboxbootstrap-4

Any tips on creating a website with a gradient background that moves along with the window as you scroll?

Can anyone help me figure out how to achieve this? I'm trying to create a similar effect to the one on the fireship website, but I'm having trouble replicating it. Appreciate any guidance. Thanks! ...

htmlcssbackgroundgradient

Unique Floating Bullet Icons Ascending When Enlarged

I'm currently trying to use a star image as a custom bullet point on an <li> element. However, I'm facing the issue where the bottom of the image aligns with the font's baseline, causing the image to be pushed upwards. Is there any sol ...

htmlcsscss-float

Exploring the combination of MVC with Ajax.BeginForm and DIV.Load

I have a template that defines an Ajax.BeginForm. The model returned contains a property called ReportLink which holds the URL to a PartialView on the server. In the Ajax.BeginForm.OnSuccessFunction, I am trying to retrieve and load HTML content using $(" ...

c#jqueryajaxasp.net-mvcasp.net-mvc-4

The placement of DropLeft is incorrect

I have encountered an issue while designing a navbar with Bootstrap 4. I have placed my links on the right side of the navbar. However, when I add a dropdown to the left side of the navbar, the dropdown appears in the wrong position. Can anyone help me ide ...

htmltwitter-bootstrapbootstrap-4

What is causing the SVG element to malfunction on iOS devices?

I am facing an issue with the <h1> tag in my design. The SVG element within it is not appearing on mobile phones when I write a media query for devices with a minimum width of 400px, even though it works fine on screens with a minimum width of 800px. ...

htmlcssiosiphonesvg

Guide on adding a local text file to a textarea embedded within a webpage

As an aspiring programmer, I am seeking assistance in understanding how to upload a local text file to a textarea within a website that I am currently developing. My expertise lies in HTML/CSS, with a good grasp of Javascript/JQuery, and I am in the proces ...

javascriptjqueryhtml

Ensuring consistency in aligning float elements

I've been struggling to create a concept design for my internship project. I aim to have a page with six clickable elements (images). When one is clicked, the others should disappear and the active one moves to the top. I managed to achieve this using ...

javascriptjqueryhtmlcss