Trapezoid form with percentage units - css

Question

In my Next.js app (basically React) I am trying to draw a trapezoid form with Styled Components, using borders.
My code is like this:
const StyledContainer = styled.div`
position: relative;
border-right: 75px solid red;
border-top: 25px solid transparent;
height: 50%;
width: 75%;
display: flex;
`
However, for my purposes, I need the border-right and border-top properties to use percentages. But when I insert 75% instead of 75px in border-right, the trapezoid is not visible anymore.
I've tried the whole day to fix this but I didn't manage. Anyone have any idea what I need to do? 🙏
For context, the parent container has both width and height properties:
const SAGraph = styled.div`
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
background-color: hotpink;
`;
I have seen similar problems which were solved by using vw as unit, but this isn't helpful in my case, as I need to use percentages, to make sure that the trapezoid doesn't move outside the container and it uses the whole width of the container...
Edit: This is a picture of my desired output:

Answer 1

If the red section is just for decoration, you can add it to the parent element as a pseudo after element, colored red and clipped into the required shape using CSS clip-path and percentage coordinates.
* {
margin: 0;
}
body {
width: 100vw;
height: 100vh;
}
.SAGraph {
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
background-color: hotpink;
position: relative;
}
.SAGraph::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: red;
bottom: 0;
left: 0;
clip-path: polygon(0 100%, 0 60%, 60% 50%, 60% 100%);
}
<div class="SAGraph"></div>
If you want the red bit to be an actual child element then use the same technique direct on a child element (not on a pseudo element).