3

I am trying to style a button and a div in React so that they have cut corners with visible border all around them. Currently hovered button looks like this and styled div like this.

The problem with the button is that I wish the border follows the shape of the button and not disappear together with the corner. The problem with the styled div is similar. I want it to have cut corner with border following the shape (marked with red line).

I used clip-path and it just hides part of the element.

Here is the inline code I use to style Material UI button:

                        <Button
                          sx={{
                            textTransform: "none",
                            backgroundColor: "#1A82FF",
                            borderRadius: "0px",
                            clipPath: "polygon(100% 0, 100% 65%, 90% 100%, 0 100%, 0 35%, 10% 0)",
                            border: "2px solid",
                            borderImage: "linear-gradient(180deg, #169EF5 0.51%, #1D7CEE 97.96%) 1",
                            color: "#FFFFFF",
                            marginTop: "12px",
                            fontFamily: "'Poppins', sans-serif",
                            fontStyle: "normal",
                            fontWeight: "400",
                            fontSize: "14px",
                            lineHeight: "21px",
                            height: "44px",
                            width: "176px",
                            alignSelf: "center",
                          }}
                          onClick={()=>action()}>
                          Button
                        </Button>

And here is the styled component code:

export const CardContainer = styled.div`
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
`;

I spent several hours already searching for solutions with no effect. I tried the answers found here https://stackoverflow.com/a/31854299/7114550 but if I use outer and inner containers the border doesn't look bright like currently - it's darker since I use rgba colors with opacity.

The other source I tried the most was this one https://css-tricks.com/cut-corners-using-css-mask-and-clip-path-properties/ but I can't use css variables in my current setting. I was trying to use masks from here and change css variables to numbers

.first:before {
  background:
    radial-gradient(farthest-side at 0    0   ,#0000 calc(98% - 10px),red calc(100% - 10px) 98%,#0000) 0    0/40px 40px no-repeat,
    conic-gradient(from 180deg at right 10px top    10px, #0000 0 90deg,green 0) 100% 0/calc(100% - 40px + 10px) calc(100% - 40px + 10px) no-repeat,
    radial-gradient(farthest-side at 100% 100%,#0000 calc(98% - 10px),orange calc(100% - 10px) 98%,#0000) 100% 100%/40px 40px no-repeat,
    conic-gradient(from 0deg   at left  10px bottom 10px, #0000 0 90deg,blue 0) 0 100%/calc(100% - 40px + 10px) calc(100% - 40px + 10px) no-repeat;
}
.second:before {
  --g: #0000 calc(98% - 10px),#000 calc(100% - 10px) 98%,#0000;
  --mask:
    radial-gradient(farthest-side at 0    0   ,var(#0000 calc(98% - 10px),#000 calc(100% - 10px) 98%,#0000)) 0    0/40px 40px no-repeat,
    conic-gradient(from 180deg at right 10px top    10px, #0000 0 90deg,#000 0) 100% 0/calc(100% - 40px + 10px) calc(100% - 40px + 10px) no-repeat,
    radial-gradient(farthest-side at 100% 100%,var(#0000 calc(98% - 10px),#000 calc(100% - 10px) 98%,#0000)) 100% 100%/40px 40px no-repeat,
    conic-gradient(from 0deg   at left  10px bottom 10px, #0000 0 90deg,#000 0) 0 100%/calc(100% - 40px + 10px) calc(100% - 40px + 10px) no-repeat;
  background:linear-gradient(45deg,blue,red);
  -webkit-mask: var(--mask);
          mask: var(--mask);
}

I was also trying a solution with pseudo-class "before" but it was also using css variables.

Can someone help to solve the puzzle?

MrOwl
  • 69
  • 1
  • 9

0 Answers0