I am trying to create a green triangular section as shown in the highlighted screenshot. I am looking for ways to achieve this effect, particularly adding the "corner" to the bottom border of the container.
Here is my desired outcome: https://i.sstatic.net/8tiwa.png
The current approach I am taking involves working with a black container. My goal is to incorporate the green region mentioned earlier into the bottom-border of this container.
<AudienceCategories>
<HeadBar>
<Logo src={'/static/logos/planto.png'} onClick={null} />
<CreateAudience>
<BsPlusCircleFill size={25} />
<motion.div style={{ marginLeft: 10 }}>
<SubText color="white">Create Audience</SubText>
</motion.div>
</CreateAudience>
</HeadBar>
<TextHolder>
<Heading color="white">Audience Categories</Heading>
<SubTextContainer>
<motion.div style={{ width: '400px', display: 'inline-block' }}>
<SubText color={nativeColors.white}>
Browse different audience types to see micro-segments and user
profiles!
</SubText>
</motion.div>
</SubTextContainer>
</TextHolder>
<SubTextContainer>
<motion.div
style={{
display: 'flex',
marginTop: '50px',
justifyContent: 'center'
}}
>
<SearchInput
placeholder="Search by user type"
onChange={onSearchChange}
value={searchString}
customWidth={'650px'}
/>
</motion.div>
</SubTextContainer>
</AudienceCategories>
Styled Components:
const Container = styled(motion.div)``;
const Logo = styled("img")`
width: 114px;
height: auto;
object-fit: contain;
margin: 20px 0;
cursor: pointer;
`;
const Variants = styled(motion.div)`
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
margin: 0 auto;
max-width: 1000px;
width: 60%;
`;
const AudienceCategories = styled(motion.div)`
min-height: 450px;
background-color: ${nativeColors.pitchBlack};
color: ${nativeColors.white};
`;
const HeadBar = styled(motion.div)`
display: flex;
justify-content: space-between;
padding: 30px;
`;
const CreateAudience = styled(motion.div)`
display: flex;
cursor: pointer;
justify-content: space-around;
align-items: center;
`;
const TextHolder = styled(motion.div)`
display: flex;
margin-top: -30px;
flex-direction: column;
justify-content: center;
text-align: center;
`;
const SubTextContainer = styled(motion.div)``;
Current attempt: https://i.sstatic.net/Qi1Ke.png
Any guidance on how to achieve this would be greatly appreciated. Thank you!