Unskewing the ends of an assortment multiple skewed images

by

You can use negative margin for last and first one to hide half the element:

.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>

More Related Contents:

  1. ‘transform3d’ not working with position: fixed children
  2. How to keep origin in center of image in scale animation?
  3. Html/Css Triangle with pseudo elements
  4. Setting transform-origin on SVG group not working in Firefox
  5. Why does my Transform snap back?
  6. How to rotate and postion an element on the top left or top right corner?
  7. 5 images symmetrically seperated with diagonal lines
  8. Position fixed doesn’t work when using -webkit-transform
  9. How to transform each side of a shape separately?
  10. Browser is not displaying images
  11. How can I select an element with multiple classes in jQuery?
  12. Why is there an unexplainable gap between these inline-block div elements? [duplicate]
  13. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  14. Grid properties not working on elements inside grid container
  15. Is element block level or inline level?
  16. Maintain the aspect ratio of a div with CSS
  17. How do I give text or an image a transparent background using CSS?
  18. Border length smaller than div width?
  19. Using :before and :after CSS selector to insert HTML [duplicate]
  20. Hide html horizontal but not vertical scrollbar
  21. Different CSS for each browser?
  22. Why is there vertical scroll on the main container?
  23. CSS: image link, change on hover
  24. Scrolling to an Anchor using Transition/CSS3
  25. Can a ::before selector be used with a ?
  26. Selecting the last element among various nested containers
  27. Element with “display: inline-flex” has a strange top margin
  28. Div with horizontal scrolling only
  29. Setting max-height for table cell contents
  30. Best Way to do Columns in HTML/CSS

Leave a Comment