如何旋转父容器且不影响子Image？（React+Chakra UI）

我想在HTML/CSS中实现类似下图的设计：

核心需求是实现带斜角的图片，创建一行由斜向分隔符分隔的图片。

目前尝试均未成功，面临以下主要问题：

• 父容器旋转会连带旋转子图片。
• 即使父容器旋转不影响子图片，父容器宽度与经旋转遮罩后的图片宽度不匹配，导致后续图片无法紧密对齐（例如Flexbox中两张图片各占容器50%的场景）。
• 手动缩小父容器宽度会导致图片尺寸过小。

现有实现代码（基于React.ts + Chakra UI）：

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

interface DividedBannerProps extends BoxProps {
  /** 分割数量 */
  divisionCount?: number;
  /** 分隔线旋转角度 */
  bannerAngle?: number;
  /** 背景图片的相对路径或URL
   * 仅使用前`divisionCount`张图片 */
  backgrounds: string[];
}

/**
 * 分割横幅组件
 * 渲染带旋转分隔线作为图片遮罩的横幅。
 */
export const DividedBanner: React.FC<DividedBannerProps> = ({
  divisionCount = 1,
  bannerAngle = 0,
  backgrounds = [],
  ...props
}) => {
  return (
    <Box w="100%" h="8rem" overflow="hidden" {...props} border={"2px solid black"}>
      <HStack gap={4} overflow="hidden">
        {Array.from({ length: divisionCount }).map((_, index) => (
          <Box transform={`rotate(-${bannerAngle}deg)`}>
            <Image
              src={backgrounds[index % backgrounds.length]}
              objectFit="cover"
            />
          </Box>
        ))}
      </HStack>
    </Box>
  );
};

export default DividedBanner;

核心思路 #

放弃旋转父容器的方案，改用clip-path直接裁剪图片容器的形状，既避免子图片被旋转，又能精确控制斜角的位置和宽度，同时通过Flexbox实现无缝对齐。

修改后的实现代码 #

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

interface DividedBannerProps extends BoxProps {
  /** 分割数量 */
  divisionCount?: number;
  /** 分隔线倾斜角度对应的裁剪偏移量（单位：px）
   * 数值越大斜角越陡 */
  clipOffset?: number;
  /** 背景图片的相对路径或URL
   * 仅使用前`divisionCount`张图片 */
  backgrounds: string[];
}

/**
 * 分割横幅组件
 * 渲染带斜角分隔线的图片横幅
 */
export const DividedBanner: React.FC<DividedBannerProps> = ({
  divisionCount = 2,
  clipOffset = 40,
  backgrounds = [],
  ...props
}) => {
  return (
    <Box w="100%" h="8rem" overflow="hidden" {...props} border={"2px solid black"}>
      <HStack spacing={0} w="100%">
        {Array.from({ length: divisionCount }).map((_, index) => {
          let clipPath = "";
          // 第一张图片：右侧裁剪斜角
          if (index === 0) {
            clipPath = `polygon(0 0, calc(100% - ${clipOffset}px) 0, 100% 100%, 0 100%)`;
          } 
          // 最后一张图片：左侧裁剪斜角
          else if (index === divisionCount - 1) {
            clipPath = `polygon(0 0, 100% 0, 100% 100%, ${clipOffset}px 100%)`;
          } 
          // 中间图片：左右都裁剪斜角
          else {
            clipPath = `polygon(0 0, calc(100% - ${clipOffset}px) 0, 100% 100%, ${clipOffset}px 100%)`;
          }

          return (
            <Box
              w={`${100 / divisionCount}%`}
              h="100%"
              clipPath={clipPath}
              overflow="hidden"
            >
              <Image
                src={backgrounds[index % backgrounds.length]}
                w="100%"
                h="100%"
                objectFit="cover"
              />
            </Box>
          );
        })}
      </HStack>
    </Box>
  );
};

export default DividedBanner;

关键说明 #

1. 避免子图片旋转：用clip-path直接裁剪容器形状，图片本身保持正常方向，仅显示裁剪后的区域。
2. 无缝对齐：HStack设置spacing={0}，每个图片容器按100%/divisionCount分配宽度，配合对应方向的斜角裁剪，实现分隔线完美衔接。
3. 保证图片尺寸：图片设置w="100%"+h="100%"+objectFit="cover"，确保图片填满容器且比例正确，不会因裁剪导致尺寸过小。

内容的提问来源于stack exchange，提问作者MyPing0