如何用Chakra UI 2.10.4实现按钮右侧的折叠丝带效果？

你可以直接用Chakra UI原生组件和样式实现这个折叠丝带效果，不需要额外引入第三方库。核心思路是通过绝对定位的嵌套Box模拟丝带主体和折叠三角部分，利用边框属性实现折叠的视觉效果。

修改后的完整代码 #

<Box bg={"white"} rounded={"sm"} w={"100%"} p={5}>
  <Flex justifyContent={"space-between"} align={"center"}>
    <HStack>
      <Text fontWeight={"bold"}>Accelerator Program</Text>
      <RiInformation2Line />
    </HStack>

    <Box position={"relative"} overflow={"visible"}>
      {/* 按钮主体 */}
      <Button
        bg={"green.400"}
        color={"white"}
        size={"xs"}
        px={4}
        py={2}
        borderRadius={"sm"}
        boxShadow={"lg"}
        pos={"absolute"}
        top={"-5px"}
        right={"-30px"}
        _hover={{ bg: "green.500" }}
      >
        Cohart Number: N/A
      </Button>
      {/* 丝带主体部分 */}
      <Box
        pos={"absolute"}
        top={"12px"}
        right={"-45px"}
        w={"25px"}
        h={"24px"}
        bg={"green.400"}
        boxShadow={"lg"}
      />
      {/* 折叠三角部分 */}
      <Box
        pos={"absolute"}
        top={"24px"}
        right={"-45px"}
        borderTop={"12px solid green.300"}
        borderLeft={"12px solid transparent"}
        borderRight={"13px solid transparent"}
      />
      <Text fontSize={"xx-small"} mt={8}>
        <b>Time Spent:</b> 0hr 0m
      </Text>
    </Box>
  </Flex>
</Box>

实现说明 #

• 丝带主体：用和按钮同色的Box，通过绝对定位放在按钮右侧，调整top和right参数对齐按钮
• 折叠三角：利用CSS边框特性，设置单边边框颜色、其余边透明来模拟折叠尖角，用稍浅的绿色增强层次感
• 可根据实际需求调整宽高、位置、颜色值，匹配你的UI设计

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