如何用纯CSS计算视口对角线长度以创建指定半径的圆？

AI 小北

2026-7-13

纯CSS实现半径等于视口对角线长度的圆

你的思路方向是对的，但CSS的calc()确实不允许两个相对单位直接相乘（比如100svw * 100svw），不过可以通过CSS原生数学函数绕开这个限制，纯CSS就能实现需求：

方法1：使用`hypot()`函数（推荐）

CSS的hypot()函数专门用于计算直角三角形的斜边长度，正好对应视口对角线的计算逻辑，直接调用就能一步到位：

.circle {
  position: absolute;
  /* 半径等于视口对角线长度，因此宽高设为对角线的2倍 */
  width: calc(2 * hypot(100svw, 100svh));
  height: calc(2 * hypot(100svw, 100svh));
  border-radius: 50%;
  /* 让圆中心对齐视口中心 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

hypot(a,b)会直接返回√(a²+b²)的计算结果，完美适配svw、svh这类视口单位，无需处理单位相乘的语法问题。

方法2：用`sqrt()`+`pow()`组合实现

如果需要兼容少量不支持hypot()的旧环境，可通过pow()计算平方，再用sqrt()开平方得到对角线长度：

.circle {
  position: absolute;
  --diagonal: sqrt(pow(100svw, 2) + pow(100svh, 2));
  width: calc(2 * var(--diagonal));
  height: calc(2 * var(--diagonal));
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

pow(x,2)替代了直接相乘的写法，避免了calc()的语法错误，最终效果和方法1一致。