Gestreiftes Bildmuster in Div [Duplikat] ⇐ CSS

[Anonymous]

Ich versuche ein Muster zu erstellen, bei dem zwei oder mehr Bilder die Fläche eines Divs teilen, in einem Streifenmuster:

• Wenn 2 Bilder im Div platziert werden, werden sie nebeneinander angezeigt, die Linie zwischen ihnen ist diagonal und kreuzt den Mittelpunkt des Divs.
• Wenn 3 img im div platziert werden, dann wird das erste Bild in der oberen linken Ecke angezeigt, das zweite Bild ist ein diagonaler Streifen, dessen Mitte die Mitte des div ist und das letzte Bild wird in der unteren rechten Ecke angezeigt.
• Das gleiche Muster gilt für 4 und mehr Bilder.

Wenn möglich, versuche ich, es so zu machen dass:

• Es ist generisch, d. h. mein Server fügt einfach so viele img als untergeordnete Elemente des div hinzu, wie er benötigt, und alle Größen sind implizit.
• Es unterstützt 1 img, falls erforderlich.

Bisher sieht mein Code so aus Dies:

Code: Select all

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

Was gerendert wird (auf einem dunklen Hintergrund zur besseren Sichtbarkeit oder wenn Sie es vorziehen, keine HTTP-Anfragen an einen Drittanbieterserver zu senden):



Oder mit 3 Bildern:



Wie Sie Wie ich sehen kann, erhalte ich einige Streifen, wie ich wollte, aber die Bilder sind in ihrem .stripe-Container abgeschnitten.
Wenn ich z.B. Scale(200%) zum Bild, dann würde ich bessere Streifen bekommen, aber sichtbar vergrößerte Bilder und die Ecken wären immer noch nicht in Ordnung:



Ich wüsste sogar (zumindest einiges davon), was ist Im weiteren Verlauf kann ich anscheinend keine Lösung finden. Würden Sie wissen, wie es geht?