如何在HTML中实现Win10计算器样式的完整三次根号x符号？

以下几种方法可以帮你写出符合要求的完整三次根号符号，无需使用简化样式：

方法1：Unicode字符 + CSS排版 #

∛对应的Unicode编码是U+221B，可直接用∛或十进制实体∛调用，再通过CSS调整被开方数的位置，模拟根号横线包裹效果：

<span class="cube-root">
  &#8731;<span class="radicand">x</span>
</span>

<style>
.cube-root {
  position: relative;
  font-size: 24px;
}
.radicand {
  position: relative;
  top: 6px;
  left: -4px;
  border-top: 1px solid black;
  padding: 0 2px;
}
</style>

调整top和left的数值，就能让x的顶部被横线覆盖，贴合Windows计算器的视觉效果。

方法2：HTML实体组合（兼容旧浏览器） #

针对需要兼容老旧浏览器的场景，用上标3搭配根号符号，再通过CSS校准布局：

<span class="cube-root">
  <sup>3</sup>&radic;<span class="radicand">x</span>
</span>

<style>
.cube-root {
  position: relative;
  font-size: 24px;
}
.cube-root sup {
  font-size: 16px;
  position: relative;
  top: -8px;
  left: 2px;
}
.radicand {
  position: relative;
  top: 6px;
  left: -6px;
  border-top: 1px solid black;
  padding: 0 3px;
}
</style>

方法3：纯CSS绘制（高度自定义） #

如果Unicode符号的样式不符合预期，可完全用CSS绘制根号形状和指数，精确控制视觉细节：

<span class="cube-root">
  <span class="radic-symbol"></span>
  <span class="radicand">x</span>
</span>

<style>
.cube-root {
  position: relative;
  font-size: 24px;
  display: inline-block;
}
.radic-symbol {
  position: absolute;
  width: 12px;
  height: 20px;
  border-left: 1px solid black;
  border-top: 1px solid black;
  border-top-left-radius: 2px;
  transform: rotate(-45deg);
  top: 2px;
}
.radic-symbol::before {
  content: '3';
  font-size: 16px;
  position: absolute;
  top: -10px;
  left: -6px;
}
.radicand {
  margin-left: 8px;
  border-top: 1px solid black;
  padding: 0 2px;
  position: relative;
  top: 8px;
}
</style>

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