Полосатый рисунок изображения в div ⇐ Html

[Anonymous]

Я пытаюсь создать шаблон, в котором 2 или более изображения разделяют область элемента div в виде полос:

• Если 2 изображения помещены в элемент div, они отображаются рядом, линия между ними является диагональной и пересекает центральную точку элемента div.
• Если 3 изображения помещаются в элемент div, тогда первое изображение отображается в верхнем левом углу, второе изображение представляет собой диагональную полосу, середина которой является серединой элемента div, а последнее изображение отображается в правом нижнем углу.
• Тот же шаблон применим для 4 и более изображений.

Если возможно, я пытаюсь сделать так, чтобы:

• Он является общим, т.е. мой сервер просто добавит столько изображений, сколько дочерних элементов div, сколько ему нужно, и все размеры неявны.
• При необходимости он поддерживает 1 изображение.

Пока мой код выглядит так:

Код: Выделить всё

.stripe-container {
/* Size is fixed here for MRE purpose but it will be based on its parent on the real page */
width: 20rem;
height: 12rem;
margin-left:auto;
margin-right:auto;
overflow: hidden;
position: relative;
}
.stripes {
display: flex;
position: absolute;
top: 50%;
left: 50%;
width: 150%;
height: 150%;
transform: translate(-50%, -50%) rotate(30deg);
}
.stripe {
flex: 1;
overflow: hidden;
}
.stripe:first-child, .stripe:last-child {
/* Give them more space because they are in the corner */
flex: 1.5;
}
.stripe > img {
width: 100%;
height: 100%;
object-fit: cover;
transform: rotate(-30deg);
}




[img]https://images.unsplash.com/photo-1519996529931-28324d5a630e?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80[/img]

[img]https://images.unsplash.com/photo-1611273426858-450d8e3c9fce?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80[/img]

[img]https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80[/img]

[img]https://images.unsplash.com/photo-1579783902614-a3fb3927b6a5?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80[/img]

Что отображается (на темном фоне для видимости или если вы предпочитаете не отправлять HTTP-запросы на сторонний сервер):



Или с 3 изображениями:



Как можете видите, я получаю несколько полос, как и хотел, но изображения обрезаются внутри контейнера .stripe.
Если бы я добавил, например. Scale(200%) в img, тогда полосы будут лучше, но изображения будут заметно увеличены, а углы все равно будут не в порядке:



Даже зная (хотя бы частично), что происходит о, я не могу найти решение. Знаете ли вы, как это сделать?

Подробнее здесь: https://stackoverflow.com/questions/797 ... ern-in-div