Html 使我的边界三角形响应

我有一个div，它是一个使用CSS边框的三角形

它当前设置为500px宽。但是我想让它占据整个屏幕的宽度，同时保持三角形的尖头形状

#一个{
宽度：500px；
背景色：浅绿色；
高度：300px；
}
#两个{
边框顶部：100px纯红；
右边框：250px实心透明；
边框底部：100px实心透明；
左边框：250px实心透明；
宽度：0；
身高：0；
}

我有：既然您想让它对整个浏览器宽度做出响应，那么它非常简单：

#一个{
宽度：100vw；
背景色：浅绿色；
高度：300px；
}
#两个{
边框顶部：100px纯红；
右边框：50vw实心透明；
边框底部：100px实心透明；
左边框：50vw实心透明；
宽度：0；
身高：0；
}

---

在谷歌搜索“响应CSS三角形”时发现了这一点

相关代码如下：

/*Down pointing*/
.triangle-down {
    width: 10%;
    height: 0;
    padding-left:10%;
    padding-top: 10%;
    overflow: hidden;
}
.triangle-down:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left:-500px;
    margin-top:-500px;

    border-left: 500px solid transparent;
    border-right: 500px solid transparent;
    border-top: 500px solid #4679BD;
}

使用jQuery：

$(window).resize(function () {
  var divWidth = $('#one').width();
    $('#two').css({
      borderLeftWidth: divWidth / 2,
      borderRightWidth: divWidth / 2
    });
});

$(window).trigger('resize');


#one {
  max-width: 100%;
}

---

您不能对边框执行此操作，因为它们不接受%值。你可能需要重新思考。也许是SVG？