css Question posted in
Some basic documentation can be found here.

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

enter image description here

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?

Tags:

2

Answers


  1. 0

    You need to write some CSS to achieve that.

    You can add a &::before pseudoelement to the button and then use position: absolute to position it where you want it, the Button needs position: relative to contain the ::before.

    You can create that shape with CSS for the ::before: https://www.cssportal.com/css-triangle-generator/

    button::before {
   content: '';
   width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 169px 169px 0 0;
   border-color: #691C15 transparent transparent transparent;
   transform: rotate(0deg);
}
    Login or Signup to reply.
  2. 0

    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.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search