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

I want to make something like the one below.Figma that I want to create

I have my HTML like the one below.

<div ></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 >
    <div >
        <div >
           <img src="SVG" alt="Logo" width="200" height="80">
        </div>
        <div >
           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?

CodePudding user response：

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