Как построить диагональный раздел героя? - PullRequest
Новая
       20

Как построить диагональный раздел героя?

0 голосов
/ 22 мая 2019

Я пытаюсь найти лучший способ построить макет раздела героя на веб-странице, который состоит из половины содержимого и половины изображения, разделенных диагональной линией; как то так:

enter image description here

Я читал об использовании SVG, clip-path и подобных вещах, но я не совсем уверен, как их использовать; или если с этим было бы легко справиться с адаптивным дизайном, так как в основном мне нужно, чтобы изображение приобрело эту форму, поскольку оно предоставляется пользователем, поэтому я не могу просто вставить изображение, уже обрезанное таким образом.

Базовая структура, о которой я думаю, выглядит примерно так: 

<div class="hero">
    <div class="hero-image">
        <img src="" alt="">
    </div>
    <div class="hero-content">
        <img src="" alt="">
        <h4>Title</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum non id saepe quae praesentium exercitationem omnis ratione nulla optio, tempore repellendus maxime veritatis molestiae. Laudantium quisquam illum atque excepturi expedita.</p>
    </div>
</div>

Я могу просто разделить экран на 50% ширины, но мне нужно на самом деле разделить обе части, как на изображении выше, какие-либо идеи или направления?

1 Ответ

1 голос
/ 23 мая 2019

Первым шагом было бы создать обтравочную фигуру для изображения, я использовал https://bennettfeely.com/clippy/,, это позволяет вам создавать собственные фигуры.

Создан прямоугольный треугольник, чтобы задать форму <div>, для которой в качестве фона будет установлено изображение.

.hero-image{ width:100%; height:100%; background-image: url('http://placehold.it/1920x1080'); background-position: center; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%); } 

.hero-container{
  height:100vh;
  width:100%;
  margin:0;
  padding:0;
}
.hero-image{
  width:100%;
  height:100%;
  background-image: url('http://placehold.it/1920x1080');
  background-position: center;
  
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.hero-text{
  position: absolute;
  top:50%;
  left:10%;
}
h1{
  font-family: sans-serif;
  font-size: 4rem;
}
<div class="hero-container">
  <div class="hero-image">
  </div>
  <div class="hero-text">
    <h1>Hello World</h1>
    <p>This is some text for the placeholder</p>
    <button>click me</button>
  </div>
</div>
...