Fixing the distortion of various skewed images at both ends

Earlier, I inquired about skewing a collection of images and was pleased with the results.

https://i.sstatic.net/Skquv.png

.container {
  font-size: 0;
  height: 215px;
  margin: 30px 50px;
  text-align: center;
  color: black;

}

.box1 {
...

<div class="container">
  <div class="box1"><span style="background-image:url(illustris1.png)"></span></div>
  ...

My code may be longer than the other thread, but it allows for easy resizing of each image.

Now, my goal is to only skew the inner portion of the far left end box1 and the far right end box6 within the container. It resembles this desired outcome: Skew one side only of an element.

I've spent hours trying various methods without success. I need to find a way to skew only one side of box1 and box6 without distorting the images.

htmlcsscss-transforms

Answer №1

Unique response

In this improved version sourced from an article I authored, you can find a better approach: https://css-tricks.com/css-grid-and-custom-shapes-part-2/

Enhancements include hover effects and gaps between elements.

.gallery {
  --s: 50px; /* adjust the slanted part */
  
  display: grid;
  height: 350px;
  gap: 8px;
  grid-auto-flow: column;
  place-items: center;
}
.gallery > img {
  width: 0;
  min-width: calc(100% + var(--s));
  height: 0;
  min-height: 100%;
  object-fit: cover;
  clip-path: polygon(var(--s) 0,100% 0,calc(100% - var(--s)) 100%,0 100%);
  cursor: pointer;
  transition: .5s;
}
.gallery > img:hover {
  width: 15vw; 
}
.gallery > img:first-child {
  min-width: calc(100% + var(--s)/2);
  place-self: start;
  clip-path: polygon(0 0,100% 0,calc(100% - var(--s)) 100%,0 100%);
}
.gallery > img:last-child {
  min-width: calc(100% + var(--s)/2);
  place-self: end;
  clip-path: polygon(var(--s) 0,100% 0,100% 100%,0 100%);
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  align-content: center;
  background: #ECD078;
}
<div class="gallery">
  <img src="https://picsum.photos/id/433/600/400" alt="A Bear">
  <img src="https://picsum.photos/id/582/600/400" alt="A wolf">
  <img src="https://picsum.photos/id/1074/600/400" alt="A lioness">
  <img src="https://picsum.photos/id/237/600/400" alt="A Dog">
  <img src="https://picsum.photos/id/659/600/400" alt="A kind wolf">
  <img src="https://picsum.photos/id/593/600/400" alt="A Tiger">
</div>

Previous Answer

To create a sleek design where elements partially overlap, consider using negative margins as demonstrated below:

.container {
  display: flex;
  height: 150px;
  margin: 0 30px;
  overflow:hidden;
}

.box {
  flex: 1;
  border: 1px solid;
  transform: skew(-25deg);
  position: relative;
  overflow: hidden;
}
.box:first-child {
  margin-left:calc((100% / 5) / -2);
}
.box:last-child {
  margin-right:calc((100% / 5) / -2);
}

.box:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  right: -50%;
  transform: skew(25deg);
  background-image: var(--i);
  background-position: center;
}
<div class="container">
  <div class="box" style="--i:url(https://lorempixel.com/400/200/)"></div>
  <div class="box" style="--i:url(https://lorempixel.com/400/300/)"></div>
  <div class="box" style="--i:url(https://lorempixel.com/300/200/)"></div>
  <div class="box" style="--i:url(https://lorempixel.com/400/300/)"></div>
  <div class="box" style="--i:url(https://lorempixel.com/200/300/)"></div>
</div>

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 it possible for a span to be nested within a ul tag and also contain a li tag inside it?

According to the HTML specifications, a list item li must be a child of either an unordered list ul, ordered list ol, or menu menu. Permitted parents: An <ul>, <ol>, or <menu> element. Although not recommended, the obsolete <dir> ...

html

What could be causing the video not to display in landscape mode on the iPad Pro?

I'm having an issue with a standard HTML5 <video> on my website. The videos are working fine on most devices, however there is a problem specifically with the iPad Pro in landscape orientation. It seems to work properly in portrait orientation ...

javascriptjqueryhtmlvideodevice-detection

Problem with escaping special characters in random string HTML

As I was in the process of creating a JavaScript tool to generate random strings, with or without special characters, I stumbled upon an inspiring snippet that caught my attention: (): function randStr(len) { let s = ''; while (len--) s += ...

javascripthtmlrandomescaping

Tips for creating a dynamic sticky footer

Seeking out a solution for a sticky footer that adjusts its height based on the width of the browser. Creating sticky footers in flexible designs can be tricky. I've come across various suggestions, discussions, and fixes for implementing sticky foot ...

cssfluid-layoutsticky-footer

What is the best way to transfer information from JavaScript to a JSON database using the fetch API?

Within the userDB.json file, it appears as follows; [{ "username": "john", "xp": 5 }, { "username": "jane", "xp": 0 } ] Inside the app.js file ; async function getUsers() { le ...

javascripthtml

In Internet Explorer 11, border-radius creates a separation between elements

There is an issue with whitespace appearing around elements that have a border-radius larger than 0, but this only occurs in Internet Explorer. If using border-top-left-radius: 20px; and border-top-right-radius: 20px;: https://i.sstatic.net/MAKsx.png *W ...

htmlcsstwitter-bootstrap-3internet-explorer-11

Is there a way to organize divs to match the layout shown in the picture?

Can someone show me how to achieve this design? https://i.sstatic.net/xbrJC.png I'm currently using bootstrap 4 and my current layout looks like this https://i.sstatic.net/o78ZN.png This is the code I have so far: <div class="col-2 row align-ite ...

cssbootstrap-4

PHP Script unable to locate results

For some reason, the script I have written is not functioning properly. Upon reviewing the code from walmart.com, I verified that name="query" is accurate. However, I am uncertain about the contents within <script></script> <html> < ...

htmlsearch

help with coding in html and css

Hey there, I’m currently working on creating a loading page for my website, but I seem to be facing an issue with a white line appearing along the top and one running down the left side. If anyone could provide me with some assistance on this matter, I ...

htmlcss

What is the best way to select just the innermost row of a nested table for emphasis?

I am working on a project with multiple nested tables and I am looking for a way to highlight the innermost row below the mouse pointer. How can I achieve this? Just to provide some context, I am using nested tables to present recursive tabular data, with ...

javascriptjqueryhtmlcsshighlighting

Issues relating to the total count of pages in the uib-pagination component of AngularJS

While there is a previous thread discussing a similar topic Calculating total items in AngularJs Pagination (ui.bootstrap) doesn't work correctly, it does not address my specific issue and I am unsure how to contribute to it. We are using a complex s ...

javascripthtmlangularjsangularjs-directivepagination

Updating HTML5 localStorage value upon a click

Currently, I have implemented a countdown timer using the provided code snippet. To prevent the count from resetting upon page refresh or reload, I am utilizing local storage. However, if there is an alternative solution to achieve this functionality, I wo ...

javascriptjqueryhtmllocal-storage

Suggestions for automatically adjusting the height and width of a div containing z-indexed content

I'm attempting to automatically adjust the height and width of the parent div that contains three stacked images, but the parent is not adjusting to the dimensions of the content. Even when the div and the last image are on the same z-index, it's ...

htmlcssz-index

Expanding Material Ui menu to occupy the entire width of the page

I'm encountering an issue with a menu I created where I can't seem to adjust its height and width properly. It seems to be taking up the full width of the page. import React, { Component } from "react"; import Menu from "@material-ui/core/Menu"; ...

javascriptcssreactjsmaterial-designmaterial-ui

What could be causing the mysterious line appearing underneath my bootstrap forms?

I have created a CSS sticky footer that is designed like so: #foot { position:fixed; left:0px; bottom:0px; height:30px; width:100%; text-align: right; padding-top: 7px; font-size: small; background-color: none; } However, a mys ...

htmlcssangularjstwitter-bootstraptwitter-bootstrap-3

Error message: Unable to access the state property of an undefined object

I've been attempting to integrate a react sticky header into my stepper component. However, I've encountered an issue where it doesn't render when added inside my App.js file. As a result, I've started debugging the code within App.js ...

javascripthtmlreactjsreduxmaterial-ui

Incorporate JSON and JavaScript into your website template

Currently, I am in the process of developing my online resume using a free template that I found and downloaded. The template incorporates bootstrap and showcases a progress bar indicating my skills. However, I want to take it a step further by dynamically ...

javascriptjqueryhtmljson

I am experiencing issues with the functionality of the Search Button in my code

I am experiencing an issue with the Search Button in my Search Form. I created the Search form using only html and pure CSS to test whether JS is necessary for a Search form with Drop Down Filter! Do I need to incorporate some JS code or is it feasible to ...

htmlcss

The changing of colors does not function properly when clicked in JavaScript

I am having an issue with a drop-down list that offers two options: blue and green. When I select blue and click on the text input field, its background color alternates between blue and black (the default text field color). The same applies when I choose ...

javascriptjqueryhtmlcss

Having some vertical alignment problems in Bootstrap 4 with float-right

My template includes a comments section where I have used the w-75 float-right class, but this causes the other column to be pulled to the side where the comments are displayed. https://i.sstatic.net/HSnGT.png Below is the code snippet from my template: ...

htmlbootstrap-4