How to add SVG/text over a CSS Polygon in Angular - css

Question

I want to make something like the one below.Figma that I want to create
I have my HTML like the one below.
<div class="quad"></div>
where my class quad is defined in CSS like the one below.
.quad {
border-bottom: 100vh solid #ffffff;
border-left: 20vw solid transparent;
width: 60vw;
}
If I add SVG and the text something like below,
<div class="quad">
<div class="row">
<div class="col-6">
<img src="SVG" alt="Logo" width="200" height="80">
</div>
<div class="col-6">
Beetle
</div>
</div>
</div>
The result of the above change is:- After adding SVG/text in quad div
how should I add the beetle SVG and the text onto the CSS polygon correctly , just like the Figma?

Answer 1

Try adding position:absolute to your row class:
.row{
position: absolute;
display: flex;
}
I also suggest you look into css property transform: skewY() to draw that triangle on the left hand of your design. That way you can leave the rest of your container plain white and achieve the design you want. Here is a website that lets you try skewY() with different angles.
skewY() reference