Html 带透明背景的全宽垂直响应三角形

我在堆栈溢出上看到了数百篇关于三角形的帖子。 大多数需要的三角形都是小的和水平的，但我找不到我需要的

我需要一个三角形，它是：

• 垂直的
• 全宽
• 从左到右
• 左侧是父级的全高
• 响应的
• 三角形上下透明

通过研究stackoverflow上的帖子，我想出了两个例子：

案例1:响应迅速，但顶部/底部不透明：

.element{
背景颜色：浅绿色；
边框：1px纯黑；
高度：300px；
宽度：100%；
位置：相对位置；
}
.覆盖{
位置：绝对位置；
身高：100%；
宽度：100%；
背景：
线性梯度(
在左上角，
黑色
黑色50%，
rgba（0,0,0,0）50%，
rgba（0,0,0,0））左中心不重复，线性渐变(
在左下角，
黑色
黑色50%，
#007BF 50%，
#007bff
)左中无重复；
背景大小：200%100%；
}

---

您可以使用响应SVG元素进行覆盖，如下所示：

.element{
背景颜色：浅绿色；
边框：1px纯黑；
高度：300px；
宽度：100%；
位置：相对位置；
}
.叠加3{
高度：300px
}

您是否考虑过使用SVG元素，还是必须在CSS中使用？SVG非常好，但我从未使用过它，所以我还没有研究过它。我可以用它创建一个背景覆盖吗？IE也支持吗？我需要至少支持IE11，最好是IE9You-ARE-someous。为什么我找不到解决办法。这正是我需要的！非常感谢你：D