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

Question

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

3

我有一个小问题。我正在尝试制作图像的结构。我有CSS和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>

但结果是从这张图片得来的。

我该如何获得第一张图片的结果。左右两边的图像有直边。

- Tatar Jony

可能是重复的问题：https://stackoverflow.com/questions/49289529/unskewing-the-ends-of-an-assortment-multiple-skewed-images/49289555#49289555 - Temani Afif

我的例子中不是背景图像，而是普通的图片链接。 - Tatar Jony

我知道，我给了你一个可能的重复项来获得一些想法 ;) - Temani Afif

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- G-Cyrillus · Accepted Answer

你基本上只需要偏斜链接，然后再取消图片偏斜。需要使用overflow:hidden来覆盖整个屏幕/链接。

例如：

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 还可以确保图像填满整个链接，但会被裁剪。

对于文本，可以在图片旁添加，并通过 flex 居中。以下是示例代码：https://codepen.io/gc-nomade/pen/vaJzaM

如果您想在背景图像上放置链接，可以参考此示例：https://codepen.io/gc-nomade/pen/vGvRPZ/（将标题转换为链接）

两个示例都会扭曲容器，然后将相反的扭曲值应用于取消扭曲内容。

直边是通过允许内容溢出但在边缘外隐藏而形成的。