如何在Angular中的CSS多边形上添加SVG/text

Question

我想做下面这样的东西。Figma，我想创建

我的HTML和下面的一样。

<div class="quad"></div>

其中我的类quad是在CSS中定义的，如下所示。

.quad {
border-bottom: 100vh solid #ffffff;
border-left: 20vw solid transparent;
width: 60vw;
}

如果我添加SVG和下面的文本，

<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>

上述更改的结果是：-在quad-div 中添加SVG/text之后

我应该如何将甲壳虫SVG和文本正确地添加到CSS多边形上，就像Figma一样

Answer 1

尝试将position:absolute添加到row类：

.row{
position: absolute;
display: flex;

}

我还建议您查看css属性transform: skewY()，在设计的左手边绘制三角形。这样，您就可以将容器的其余部分保持为纯白色，并实现您想要的设计。这里有一个网站，可以让你尝试不同角度的skewY()。
偏斜Y((参考