In Chakra UI or CSS how to get ribbon-like fold on the right-hand side of the button

I have been able create the above part but I want to create the as shown in the bottom part of the image highlighted by the red circle. I have to use Chakra UI 2.10.4 in React

my code:

    <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"} //Move button slightly upwards
            right={"-30px"} //adjust for 3D effect
            _hover={{ bg: "green.500" }}
          >
            Cohart Number: N/A
          </Button>
          <Text fontSize={"xx-small"} mt={8}>
            <b>Time Spent:</b> 0hr 0m
          </Text>
        </Box>
      </Flex>
    </Box>

how do i achieve the same? is there chakra ui snippet or some other library that gets this?

Using ::after you can solve using clipPath and using css triangle both, here is the completed code for your instance:

        <Button
          bg={"green.400"}
          color={"white"}
          size={"xs"}
          px={4}
          py={2}
          right={"-30px"}
          borderRadius={"sm"}
          boxShadow={"lg"}
          position={"relative"}
          _hover={{ bg: "green.500" }}
          sx={{
            "::after": {
              content: '""',
              position: "absolute",
              bottom: "-10px",
              right: 0,
              width: "10px",
              height: "10px",
              bg: "green.600",
              clipPath: "polygon(0 0, 100% 0, 0 100%)",
            },
          }}
        >
        ....
        </Button>

and same using css triangle:

          <Button
            bg={"green.400"}
            color={"white"}
            size={"xs"}
            px={4}
            py={2}
            right={"-30px"}
            borderRadius={"sm"}
            boxShadow={"lg"}
            position={"relative"}
            _hover={{ bg: "green.500" }}
            sx={{
              "::after": {
                content: '""',
                width: "0px",
                height: "0px",
                borderStyle: "solid",
                borderWidth: "0 7px 7px 7px",
                borderColor: "transparent transparent green transparent",
                position: "absolute",
                bottom: "-5px",
                transform: "rotate(316deg)",
                right: 0,
              },
            }}
          >
            ....
          </Button>

Both ::before and ::after pseudo-elements are used to insert content before or after the content of an element, respectively. They are often used for decorative purposes, such as adding icons or shapes.

• ::before: Inserts content before the element's content.
• ::after: Inserts content after the element's content.