Как решить нерешаемую проблему с index-z: свойством?

Question

[Worddoc]

У меня возникла проблема с позиционированием элементов для получения эффекта срезанности у фона в хедере и у картинки, для нормальной состыковки "срезанного хедера" и "срезанной картинки". Важно заметить, каждый элемент - отдельный независимый блок.

Больше или меньше - это отношение z index относительно друг друга.

Жизненно необходимо научиться делать такой эффект. В голову приходит идея только с использованием z-index и наслаивания друг на друга в нужном порядке. Но этот метод, похоже не работает, т.к. то, что я задумал, алогично.
Пожалуйста, помогите решить этот вопрос с z-index, либо предложите рабочий метод достижения такого эффекта.

Comments

[Stalker_RED]

Вы бы хоть в разные цвета их покрасили, или какой-то штриховкой обозначили, а то ничего непонятно по вашей схеме. И что означают надписи типа "больше меньше полоска"? Обозначьте где что должно или не должно наслаиваться.

[Worddoc]

Stalker_RED: я не могу закрасить, потому что тогда не будет ясна суть. Тут изначально метод с z-index провальный, поэтому, наверное, нужен другой способ. Больше или меньше - это в рамках z-index. Т.е. если полоска больше картинки, то у полоски z-index больше, чем у картинки.

[Stalker_RED]

Worddoc: И в чем проблема?

[Worddoc]

Stalker_RED: нужно найти способ достижения такого эффекта,чтобы срезанный хедер и срезанная картинка соприкасались, либо попробовать развить мою идею с полоской и z indez

[dummyman]

[Worddoc]

dummyman: да, именно так) Я себе так мозг сломал, пока думал, как это реализовать(

Answer 1

[yadren]

https://www.templatemonster.com/ru/demo/58833.html посмотрите здесь как пример. Реализовано с помощью псевдоэлемента и transform. И вот отдельная статья по созданию наклонных блоков https://kilianvalkhof.com/2017/design/sloped-edges...

Answer 2

[Владислав]

Чтобы накладывать слои друг на друга не обязательно делать z-index. Если задать элементам position: absolute например, то они наползут друг на друга так, что нижний элемент в верстке окажется сверху. В вашем случае я понял что картинка идет после хедера. Тогда полоску положите в низ хедера, в один контейнер.

<div class="group">
    <header></header>
    <div class="poloska"></div>
</div>

.group {
position: relative;
z-index: 1;
}
.poloska {
position: absolute;
bottom: /*подогнать как надо */
left: 0;
right: 0;
}
Но это навскидку.
А лучше скиньте ваш хедер + картинку куда-нибудь, так будет проще и быстрее вам помочь

https://jsfiddle.net/eksge0L5/

Comments

[Worddoc]

https://jsfiddle.net/635kuog3/

Нужно, чтобы хедер был скошен, так же как и картинка.
И обязательно, чтобы хедер и картинка были независимыми, т.е. чтобы шли друг за другом и картинка не должна иметь хедер в качестве родителя

Answer 3

[Stalker_RED]

Так? https://jsfiddle.net/vtuqaghv/
Код quick&dirty, но идея, надеюсь, понятна.
Но резиновым его может быть сложновато сделать, если без скриптов.

Comments

[Worddoc]

Так, только проблема в том, что хедер и картинка должны быть независимыми в HTML. Т.к. картинка должна лежать в секции, которая стоит отдельно после хедера. Тут уже сдвиг с relative + top или transform: translateY(-x) делать. Но вот как скошенность реализовать...

[Stalker_RED]

Worddoc: Точно также как и у хедера - skew и overflow hidden. только зачем ее скашивать, если можно просто перекрыть угол картинки хедером, который уже скошен?

[Worddoc]

Stalker_RED: да, спасибо. На псевдоэлементе установил бекграунд, а хедер скосил и псевдоэлемент скосил в обратную сторону.