Creating a custom shape

i am creating a custom shape. I created but got issue in border. can some one help me. I have attached design image and my output. boders not working well. please help me codesandbox link: https://codesandbox.io/p/sandbox/shape-nltk44?file=%2Fsrc%2FApp.js code: import { Box, Stack, styled, Typography } from "@mui/material"; const RootBox = styled(Box)(({ theme }) => ({ "--indent": "15%", "--arrow-shape": polygon( var(--indent) 0, 0 50%, var(--indent) 100%, 100% 100%, calc(200% - var(--indent)) 200%, 100% 0 ) , width: "100%", })); const OutlineBox = styled(Box)(({ theme }) => ({ display: "inline-block", background: "linear-gradient(90deg, #6892B8 0%, #497091 100%)", padding: "5px", clipPath: "var(--arrow-shape)", width: "100%", })); const InnerBox = styled(Box)(({ theme }) => ({ fontFamily: "sans-serif", backgroundColor: "#0AE306", padding: "0.25rem 0.75rem 0.25rem 0.5rem", clipPath: "var(--arrow-shape)", width: "100%", height: "30px", })); export default function App() { return ( <RootBox> <OutlineBox> <InnerBox /> </OutlineBox> </RootBox> ); }
No description
No description
2 Replies
capt_uhu
capt_uhu4w ago
getting your gray "border" element to have the rounded line joins with clip-path is going to be difficult. Would suggest instead either just using the image for this or positioning a 45deg rotated square div (or pseudo element) with the border-color and border-radius for the element side
smackalpha
smackalphaOP4w ago
ok
Want results from more Discord servers?
Add your server