5 images symmetrically seperated with diagonal lines

by

No need to use positioned element, you can simplify like this and use background-position to center the element:

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

.box {
  flex: 1;
  border: 1px solid;
  transform: skew(-25deg);
  position: relative;
  overflow: hidden;
}

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

UPDATE

Here is another version of the code which is more supported (especially for IE):

.container {
  font-size:0;
  height: 150px;
  margin: 0 30px;
}

.box {
  font-size:initial;
  width:calc(100% / 5);
  height:100%;
  border: 1px solid;
  box-sizing:border-box;
  transform: skew(-25deg);
  position: relative;
  overflow: hidden;
  display:inline-block;
}

.box span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  right: -50%;
  transform: skew(25deg);
  background-position: center;
  background-size:cover;
}
<div class="container">
  <div class="box">
    <span style="background-image:url(https://lorempixel.com/400/200/)"></span>
  </div>
  <div class="box">
    <span style="background-image:url(https://lorempixel.com/400/300/)"></span>
  </div>
  <div class="box">
    <span style="background-image:url(https://lorempixel.com/200/200/)"></span>  
  </div>
  <div class="box">
      <span style="background-image:url(https://lorempixel.com/300/200/)"></span>
  </div>
  <div class="box">
     <span style="background-image:url(https://lorempixel.com/400/400/)"></span>
  </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. Unskewing the ends of an assortment multiple skewed images
  6. Why does my Transform snap back?
  7. How to rotate and postion an element on the top left or top right corner?
  8. Position fixed doesn’t work when using -webkit-transform
  9. How to transform each side of a shape separately?
  10. How to place elements like this
  11. Vertically align an image inside a div with responsive height
  12. Is there a CSS selector for the first direct child only?
  13. Remove white space above and below large text in an inline-block element
  14. Limit scope of external css to only a specific element?
  15. How to word wrap text in HTML?
  16. How do I *really* justify a horizontal menu in HTML+CSS?
  17. How to hide elements without having them take space on the page?
  18. How can I put an input element on the same line as its label?
  19. Is inside block correct?
  20. Can we set style to title tag in header
  21. How do I disable form fields using CSS?
  22. CSS selector for empty or whitespace
  23. Possible to style the css3 resize function?
  24. Why is my textarea higher up than its neighbor?
  25. Change Select List Option background colour on hover in html [duplicate]
  26. How to change font-family of drop down’s list item?
  27. CSS align images and text on same line
  28. Is there a `pointer-events:hoverOnly` or similar in CSS?
  29. sticky position on css grid items
  30. CSS/HTML: How do I change the color of the check mark within the checkbox input? [duplicate]

Leave a Comment