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>
);
}2 Replies
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 sideok