Question

我正在考虑使用纯CSS为我的网站复制以下布局。

我的问题是横幅将是图像，而当我尝试使用诸如多边形剪切路径之类的图像时，图像将无法对齐。

这是我整理的一个例子。我正在寻找一种使每个横幅完美对齐的响应方式。请记住，这些图像在移动设备上可能会变为方形版本。有没有更好的方法可以做到这一点呢？

body {
            max-width: 1200px;
            width: 100%;
            margin: 0 auto;
        }
        .banner-container {
            width: 100%;
            position: relative;
        }
        .banner-container img {
            width: 100%;
        }
        .banner-container__1 img {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 75%);
        }
        .banner-container__2 img {
            clip-path: polygon(0 0, 100% 25%, 100% 75%, 0% 100%);
        }
        .banner-container__3 img {
            clip-path: polygon(0% 25%, 100% 0%, 100% 100%, 0% 100%)
        }

<!DOCTYPE html>
<html>
<head>
    <title>Slanted Banners</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="banner-container banner-container__1">
    <img src="https://via.placeholder.com/1200x400/FF0000/FFFFFF%20?text=Placeholder" alt="Placeholder"/>
</div>
<div class="banner-container banner-container__2">
    <img src="https://via.placeholder.com/1200x400/0000FF/FFFFFF%20?text=Placeholder" alt="Placeholder"/>
</div>
<div class="banner-container banner-container__3">
    <img src="https://via.placeholder.com/1200x400/FF0000/FFFFFF%20?text=Placeholder" alt="Placeholder"/>
</div>

</body>
</html>

Answer 1

您只能将一个剪切路径与中间元素一起使用，并考虑一些负边距与其他元素重叠：

body {
  max-width: 1200px;
  margin: 0;
}

.banner-container {
  position: relative;
}

.banner-container img {
  width: 100%;
  display:block;
}

.banner-container__2 {
  clip-path: polygon(0 0, 100% 25%, 100% 75%, 0% 100%);
  margin:-10% auto;
  z-index:1;
}

<div class="banner-container banner-container__1">
  <img src="https://via.placeholder.com/1200x400/FF0000/FFFFFF%20?text=Placeholder" alt="Placeholder" />
</div>
<div class="banner-container banner-container__2">
  <img src="https://via.placeholder.com/1200x400/0000FF/FFFFFF%20?text=Placeholder" alt="Placeholder" />
</div>
<div class="banner-container banner-container__3">
  <img src="https://via.placeholder.com/1200x400/FF0000/FFFFFF%20?text=Placeholder" alt="Placeholder" />
</div>

如果需要更好的支持，可以使用如下所示的偏斜转换：

body {
  max-width: 1200px;
  margin: 0;
}

.banner-container img {
  width: 100%;
  display:block;
}
.banner-container  {
 overflow:hidden;
}
.banner-container__1 {
  margin-top: -10%;
  transform:skewY(5deg);
  transform-origin:top left;
}
.banner-container__1 img {
  transform:skewY(-5deg);
  transform-origin:bottom right;
}
.banner-container__3 {
  transform:skewY(-5deg);
  transform-origin:bottom left;
}
.banner-container__3 img {
  transform:skewY(5deg);
  transform-origin:top right;
}

<div class="banner-container banner-container__1">
  <img src="https://via.placeholder.com/1200x400/FF0000/FFFFFF%20?text=Placeholder" alt="Placeholder" />
</div>
<div class="banner-container banner-container__2">
  <img src="https://via.placeholder.com/1200x400/0000FF/FFFFFF%20?text=Placeholder" alt="Placeholder" />
</div>
<div class="banner-container banner-container__3">
  <img src="https://via.placeholder.com/1200x400/FF0000/FFFFFF%20?text=Placeholder" alt="Placeholder" />
</div>

在CSS中创建和连接非矩形横幅

1 个答案: