Html 调整窗口大小时将SVG元素固定到位

我有一个SVG三角形，在站点上用作“楔子”效果。但是，当我减小窗口大小时，SVG会移动到不合适的位置

我已经附上了一张图片（下图）以及下面的代码笔链接

有人知道我怎样才能产生这样的效果，使它在窗口调整大小时保持固定不变吗

这快把我逼疯了

代码笔：

艾米丽

它应该是什么样子的图像：

---

下面是另一个用更少的代码和渐变创建三角形的想法：

正文{
保证金：0；
填充：0；
}
.科{
位置：相对位置；
显示器：flex；
保证金：0自动；
宽度：100%；
框大小：边框框；
填充：3.583rem 0；
}
.行{
位置：相对位置；
显示器：flex；
证明内容：中心；
保证金：自动；
宽度：80%；
框大小：边框框；
z指数：9；
}
.两列{
填充物：8.916rem 2.074rem；
框大小：边框框；
宽度：37.5%；
背景：红色；
}
.2列第2列{
显示器：flex；
对齐项目：居中；
位置：相对位置；
背景#2b67f3；
宽度：62.5%；
最小宽度：0；
}
.第二列第1列：之前{
内容：“；
位置：绝对位置；
顶部：-150px；
右：62.5%；
左：-100vw；
高度：计算（50%+150px）；
背景：
线性梯度（至右上角，#162f45 49.5%，透明50%）顶部/100%150px无重复，
线性梯度（#162f45，#162f45）0 150px/100%100%无重复；
z指数：-1；
}

乱数假文
性能、安全和搜索引擎优化的网站和应用程序。插图涵盖内容管理、商业网站或宣传册网站，以推广产品或服务

Wow。太棒了。你能解释一下那里发生了什么事吗？因为background属性是用速记写的，所以我无法理解它是如何工作的，或者你是如何得到定位的。我印象深刻@如你所见，我使用了多个背景（用逗号分隔），第一个将创建三角形，它位于顶部，高度为150px，宽度为100%。第二个是正方形，高度/宽度100%向底部移动150px（三角形的高度）。当然，这两种情况都不应该重复；）@对于定位，伪元素相对于整行定位。顶部应该是负数（三角形的高度），高度是你想要的50%，但是我们加上顶部的150px。左边应该是一个大的值有溢出，右边是第二个columnsThanks Temani的宽度，使它在两个中间。那太令人印象深刻了。工作中的一个小麻烦是，在网站上还有其他一些实例，我需要用CSS渐变无法创建的形状来实现这一点。所以我的处境还是一样的。我相信我可以为人们提供声誉积分，所以我会向你发送20分，以获得如此出色的回答/解释。不过，我仍然有一点困难，因此仍需要尝试找到一种使用内嵌svg的方法。@TheChewy在本例中，您需要使您的问题更通用；）因为我们在这里回答特定的问题，没有人会知道这是一个更一般的问题。

body {margin: 0; padding: 0;}

.section {
    position: relative;
    display: flex;
    margin: 0 auto; 
    width: 100%;
    box-sizing: border-box;
    padding: 3.583rem 0;
}

.row {
    position: relative;
    display: flex;
    justify-content: center;
    margin: auto;
    width: 80%;
    box-sizing: border-box;
    z-index: 9;
}

.background-block-left-top {
    position: absolute;
    width: 40%;
    height: 50%;
    background: #162f45;
    top: 57px;
}

.two-col {
    padding:8.916rem 2.074rem;
    box-sizing: border-box;
    width: 50%;
    background: wheat;
}

.two-col.col-2 {
    display: flex;
    align-items: center;
    position: relative;
    background: #2b67f3;
    width: 85.5%;
    min-width: 0;
}

#wedge{
  position: absolute;
  width: 40%;
  height: auto;
  top: 23px;
  left: 0;
  z-index: 9;
}