使用vw单位实现CSS响应式三角形分隔符，此方案是否有效？

你用以下代码实现了三角形分隔符：

.triangle {  
  width: 100%;   
  box-sizing: border-box;   
  height: 0;   
  border-style: solid;   
  border-width: 4vw 75vw 0 23vw; 
}

先给你明确结论：这个方案是有效的，但确实有可以优化的地方，下面详细说明：

关于border-width的单位问题 #

你提到border-width不能用百分比，这点没错——CSS规范里border-width确实不支持百分比单位，但你用的vw是视窗相对长度单位，属于合法的长度单位范畴，所有现代浏览器（包括IE10及以上）都支持，所以用vw设置border-width完全没问题，不会有兼容性或渲染失效的问题。

关于75vw的设置问题 #

你当前设置的左右border宽度是75vw+23vw=98vw，再加上width:100%和box-sizing:border-box，会让元素的内容区域宽度变成100vw-98vw=2vw，但这个区域高度为0，不会影响显示，但会导致分隔符实际占比是98vw，没有铺满整个视窗宽度。

如果想要分隔符铺满整个宽度，只需要把左右border宽度调整为总和等于100vw即可，比如把75vw改成77vw，这样77vw+23vw=100vw，同时可以去掉多余的width:100%和box-sizing:border-box——因为当元素height为0时，元素的实际宽度会被左右border的宽度总和直接撑开，不需要额外设置width。

优化后的代码示例：

.triangle-divider {
  height: 0;
  border-style: solid;
  /* 左右宽度总和100vw，铺满视窗 */
  border-width: 4vw 77vw 0 23vw;
  /* 按需设置颜色：上border为分隔符颜色，其余设为透明 */
  border-color: #eaeaea transparent transparent transparent;
}

另外补充：这种利用border做分隔符的思路是完全可行的，只要注意border宽度的比例搭配，就能精准控制分隔符的倾斜角度和高度。

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