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

问题

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.

回答1:

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.

来源：https://stackoverflow.com/questions/51538147/skew-div-with-pure-css-and-allow-image-to-fill-skewed-area

标签

css

skew