Skew div with pure CSS and allow image to fill skewed area

Question

I have a small Problem. I am trying to make the structure from image. I have the CSS and HTML

.mask-skew {
    transform: skewX(-10deg);
    /*width: 300px;*/
    height: 390px;
    overflow: hidden;
    margin: 5px;
    /*border: 2px solid orange;*/
}
.art-skew {
    transform: skewX(10deg);
    position: relative;
    left: -50%;
}

<div class="row flex--row advertising-row">
        <div class="col-xs-12 col-sm-4 mask-skew">
            <img class="art-skew" src="templates/Stordeur/themes/stordeur/images/BarbourSS18Banner_1140x392px.jpg" alt="">
        </div>
        <div class="col-xs-12 col-sm-4 mask-skew">
            <img class="art-skew" src="templates/Stordeur/themes/stordeur/images/TeaserWellensteynKopie.jpg" alt="">
        </div>
        <div class="col-xs-12 col-sm-4 mask-skew">
            <img class="art-skew" src="templates/Stordeur/themes/stordeur/images/template_teaser_images_fjallraven.jpg" alt="">
        </div>

    </div>

But the result is from this Image

How can I obtain the result from first image. The left and right image has straight edge.

possible duplicate of : https://stackoverflow.com/questions/49289529/unskewing-the-ends-of-an-assortment-multiple-skewed-images/49289555#49289555 — Temani Afif, Jul 26 '18 at 11:52
on my example is not background image but normal link to image — Tatar Jony, Jul 26 '18 at 12:00
I know, I gave you a possible duplicate to have some ideas ;) — Temani Afif, Jul 26 '18 at 12:08

G-Cyrillus · Accepted Answer · 2018-07-26T12:40:02.520

You could basicly, skew links and then unskew img. overflow:hidden will need to be used to cover the whole screen/link.

example

body {margin:0;}
div {
  overflow:hidden;
}
nav {
  display:flex;
  height:100vh;
  margin:0 -10vw
}
nav a {
  flex:1;
  height:100%;
  transform:skew(-15deg);
  overflow:hidden;
}
nav a + a {
  margin-left:3vh;
}
nav a img {
  width:140%;
  height:100%;
  display:block;
  /* optionnal */
  /*object-fit: cover;
  object-position:center center;*/
  transform:skew(15deg);
  margin:0 -20%; /* in relation with width */
}

<div>
  <nav>
    <a href=""><img src="http://www.intrawallpaper.com/static/images/desktop-backgrounds-8656-8993-hd-wallpapers_js7gwWA.jpg"></a>
    <a href=""><img src="https://images.wallpaperscraft.com/image/pool_skyscraper_hotel_124522_1600x1200.jpg"></a>
    <a href=""><img src="https://wallpaperscraft.com/image/dark_background_colorful_paint_47176_300x188.jpg"></a>
  </nav>
</div>

object-fit can also help to make sure image fills entire link. it will be clipped.

For the text, it can be added aside img. and centered via flex. pen to play with : https://codepen.io/gc-nomade/pen/vaJzaM

if you want to use background-image and a link on top of it, you may inspire yourself from https://codepen.io/gc-nomade/pen/vGvRPZ/ (turn titles into links)

Both example skew the container, then apply the opposite skew value to unskew content.

Straight edges are made from letting content overflowing but hidden outside edges.

Thank you, that is what I need. The problem was only with images. The text is not a problem form me :). — Tatar Jony, Jul 26 '18 at 12:39

Skew div with pure CSS and allow image to fill skewed area

1 Answers1

Linked