时间戳

首页 > 解决方案 > 在 CSS 中创建和加入非矩形横幅

html - 在 CSS 中创建和加入非矩形横幅

问题描述

我正在考虑使用纯 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>

标签： htmlcssclip-path

解决方案

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

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>

推荐阅读