how to add stripe like devider on React - css

Question

I have three different component navbar, hero section and Top Section Top section includes both the navbar and hero section i want to get herosection like stripe but i am not able to get the angled line in between of those text like stripe site.
i have tried svg but its overlapping the text and the text is not visible i also tried the bavkground but the text is not visble with postion absolute i am not getting same result on ther screen size can we add z-index on componet tags for example I have top section like this
<div>
<div className={styles.topSection}>
<NavBar />
<MainHeroComponent />
</div>
<svg className={styles.SVG} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path
fill="#f3f4f5"
fill-opacity="1"
d="M0,256L1440,96L1440,320L0,320Z"
></path>
</svg>
</div>
can i do like this
<div>
<div className={styles.topSection}>
<NavBar />
<MainHeroComponent className="hero"/>
</div>
<svg className={styles.SVG} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path
fill="#f3f4f5"
fill-opacity="1"
d="M0,256L1440,96L1440,320L0,320Z"
></path>
</svg>
</div>
i tried
adding hero as class name on text and adding z-index but its not working can any one help me