魔法8球项目小屏幕适配咨询：如何让.triangle元素缩放时保持形状完整

解决方案 #

方案1：替换固定像素为相对视口单位 #

原代码用固定px作为border单位，屏幕缩放时尺寸不会同步变化，直接换成vw（视口宽度占比单位）即可保持原始宽高比例：

.triangle{
  position: relative;
  width: 0;
  height: 0;
  /* 原始比例为左右border:底border = 75:75:125，按比例换算为vw即可，数值可按需调整 */
  border-left: 3.91vw solid transparent;
  border-right: 3.91vw solid transparent;
  border-bottom: 6.51vw solid rgb(147, 98, 238);
}

如果需要更灵活的缩放控制，也可以用em单位，给父元素设置动态的font-size属性，修改父元素字号即可同步调整三角形尺寸。

方案2：用clip-path实现自适应三角形（更推荐） #

border实现三角形的写法适配成本高，换成clip-path结合aspect-ratio可以更简单实现自适应，自动维持形状比例：

.triangle{
  position: relative;
  /* 宽度按需求设置为百分比/ve等相对单位即可 */
  width: 8%;
  /* 固定原始宽高比：总宽度75*2=150，高度125 */
  aspect-ratio: 150 / 125;
  background: rgb(147, 98, 238);
  /* 裁切为等腰三角形 */
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

这种写法不需要处理透明border，后续调整尺寸也更简单。

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