使用纯CSS倾斜div，并允许图像填充倾斜区域

问题描述

我有一个小问题.我正在尝试从图像制作结构.我有CSS和HTML

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>

但是结果来自此图像

如何从第一张图像获得结果.左右图像具有笔直的边缘.

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

推荐答案

您基本上可以使链接倾斜，然后使img倾斜.溢出:需要使用隐藏来覆盖整个屏幕/链接.

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

示例

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 还可以帮助确保图像填充整个链接.它会被剪裁.

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

对于文本，可以将其添加到img之外.并通过flex居中.可以玩的笔: https://codepen.io/gc-nomade/pen/vaJzaM

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

如果您想使用背景图片及其顶部的链接，则可以从 https://codepen.io/gc-nomade/pen/vGvRPZ/(将标题转换为链接)

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)

两个示例都使容器倾斜，然后将相反的倾斜值应用于倾斜的内容.

直边是由让内容溢出但隐藏在外部边缘而制成的.

这篇关于使用纯CSS倾斜div，并允许图像填充倾斜区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！