Создание и объединение непрямоугольных баннеров в CSS - PullRequest
Новая
       14

Создание и объединение непрямоугольных баннеров в CSS

0 голосов
/ 05 января 2019

Я смотрю на репликацию следующего макета для моего сайта, используя исключительно CSS.

Slanted Banners

Моя проблема в том, что баннеры будут изображениями, и когда я пытаюсь использовать что-то вроде многоугольной обрезки пути, изображения не встречаются.

Вот пример, который я собрал. То, что я ищу, - это адаптивный способ сделать каждый баннер идеально выстроенным. Помните, что на мобильных устройствах эти изображения могут иметь квадратную версию. Есть ли лучший способ сделать это, чтобы добиться того, что я пытаюсь сделать? 

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>

1 Ответ

0 голосов
/ 05 января 2019

Вы можете использовать только один путь клипа со средним элементом и учитывать некоторые отрицательные поля, чтобы перекрывать другие: 

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>
...