Javascript 如何缩放div上的边框？

我用边框在div屏幕的角落里画了4个直角三角形。这是我用来做这个的链接

如何根据窗口大小缩放此边框？例如，我希望每个三角形占据浏览器宽度的33%和高度的25%

如果有CSS或jQuery中的解决方案，您会更喜欢

这是指向简化版HTML和CSS的链接。我缩小了三角形以使其适合（在我的网站上，三角形是350px乘以250px，所以在调整窗口大小时需要缩小）<代码>在此处输入代码

您可以使用：

#topLeftTriangle {
  font-size: 0px;
  line-height: 0%;
  width: 0px;
  border-top: 25vh solid #ceecec;
  border-right: 33vw solid transparent;
  float: left;
}

25vh=屏幕高度

33vw=屏幕宽度

参考：

我添加了

正文{margin:0；}

以从正文中删除默认的margin

正文{
保证金：0；
}
#包装纸{
背景色：#ffffff；
宽度：100%；
身高：100%；
}
#顶行{
宽度：100%；
}
.topRowElement{
显示：内联；
浮动：左；
宽度：33.33%；
}
#左上三角{
字体大小：0px；
线高：0%；
宽度：0px；
边框顶部：25vh实心#ceecec；
右边框：33vw实心透明；
浮动：左；
}
#头衔{
文本对齐：居中；
}
#右上三角{
字体大小：0px；
线高：0%；
宽度：0px；
边框顶部：25vh实心#ceecec；
左边框：33vw实心透明；
浮动：对；
}
.波尔塔克{
显示：内联；
浮动：左；
宽度：50%；
}
.门户网站{
文本对齐：居中；
}
.botRowElement{
显示：内联；
宽度：33.33%；
}
#博特罗{
位置：固定；
底部：0px；
宽度：100%；
}
#BotleftTriangelec{
字体大小：0px；
线高：0%；
宽度：0px；
边框底部：25vh实心#ceecec；
右边框：33vw实心透明；
浮动：左；
}
#双向三角形{
字体大小：0px；
线高：0%；
宽度：0px；
边框底部：25vh实心#ceecec；
左边框：33vw实心透明；
浮动：对；
}

三角形
标题
三角形
标题1
标题2
三角形
三角形

将这些宽度和高度指定给您的div集装箱什么？我不明白。先发布你的html，请看一看。我发布了JSFIDLE。谢谢，这很有效。我不知道vh和vw。如果我以前知道的话，会有很大帮助的。有没有办法保持三角形的比率？假设尺寸为250px和350px，无论浏览器大小如何调整，我都可以保持三角形的比例吗？@harsh.gupta全部使用25vh 33vh或25vw 33vwPerfect。非常感谢你。