如何让CSS绘制的三角形随窗口大小自适应调整？

直接把border单位换成vh没效果，大概率是浏览器渲染的细微差异，或者元素被其他样式限制了。给你几个靠谱的解决方案：

方案1：修正border视窗单位的写法 #

确保元素没有多余的宽高限制，直接用vh或vw定义border尺寸，比如：

.arrow-down {
  width: 0;
  height: 0;
  /* 用5vh作为基准，可根据需求调整比例 */
  border-left: 5vh solid transparent;
  border-right: 5vh solid transparent;
  border-top: 5vh solid #f00;
}

如果还是没效果，试试换成vw（基于窗口宽度），不同浏览器对border视窗单位的解析可能有细微差异。

方案2：用clip-path实现自适应三角形 #

这种方法比border更直观，适配视窗也更灵活：

.arrow-down {
  /* 用视窗单位定义宽高，三角形大小会跟着窗口缩放 */
  width: 10vh;
  height: 10vh;
  background-color: #f00;
  /* 多边形路径：顶点分别是底部中点、左上角、右上角 */
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

你可以通过调整width和height的数值，或者修改clip-path的坐标来改变三角形的大小和形状。

排查要点 #

如果以上方法都没生效，检查这几点：

• 是否有其他CSS规则覆盖了当前元素的border、width、height属性？
• 父元素是否设置了overflow: hidden或者固定尺寸，导致元素无法自适应？
• 浏览器是否支持视窗单位（主流浏览器均支持，可自行验证）

内容的提问来源于stack exchange，提问作者DouxDoux