Поворот родительского контейнера, не затрагивая дочернее изображение ⇐ CSS

[Anonymous]

Я пытаюсь создать дизайн, аналогичный этому изображению, в HTML/CSS:


Основное внимание здесь уделяется изображениям под углом. Моя цель — создать ряд изображений, разделенных разделителем, который может быть прямым или наклонным.
Мои усилия пока были тщетными. Я не могу понять, что мне нужно сделать, чтобы добиться такого эффекта. Основные проблемы, с которыми я сталкиваюсь:

• Вращение родительского контейнера влияет на вращение
  изображения.
• Даже если вращение родительского контейнера НЕ влияет на вращение изображения, ширина родительского контейнера не соответствует ширине изображения ПОСЛЕ того, как оно было замаскировано повернутым родительским контейнером, что делает невозможным выравнивание последующие изображения ближе из-за лишнего пустого пространства. Пример: два изображения занимают 50% контейнера во флексбоксе.
• Изменение ширины родительского контейнера вручную на меньшее значение влияет на размер изображения, делая его слишком маленьким. .

Я хочу предоставить некоторый код, чтобы лучше понять мой подход к этой проблеме. Я избавился от любой экспериментальной логики, поскольку ничего из того, что я пробовал, не работало так, как я это себе представляю. (Для редактирования ссылки на коды и коробку необходима учетная запись Google или GitHub)
https://codesandbox.io/p/sandbox/chakra ... y4kr?file=% 2Fsrc%2Findex.js%3A13%2C24

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

import React from "react";
import { Box, BoxProps, HStack, Image } from "@chakra-ui/react";

interface DividedBannerProps extends BoxProps {
/** Number of divisions */
divisionCount?: number;
/** What angle to rotate the dividers */
bannerAngle?: number;
/** Relative paths or URLs to background images
* Only the first `divisionCount` images will be used */
backgrounds: string[];
}

/**
* DividedBanner Component
* Renders a banner with rotated dividers acting as masks for images.
*/
export const DividedBanner: React.FC = ({
divisionCount = 1,
bannerAngle = 0,
backgrounds = [],
...props
}) => {
return (


{Array.from({ length: divisionCount }).map((_, index) => (



))}


);
};

export default DividedBanner;

Контекст: React.ts, ChakraUI

Подробнее здесь: https://stackoverflow.com/questions/793 ... hild-image