如何仅用HTML、CSS和Unicode实现带大括号的分数公式展示？

完全可以仅通过HTML、CSS和Unicode字符实现这类数学公式效果，无需依赖外部库或JS框架，以下是具体实现方案：

一、基础分数结构实现 #

通过分层HTML结构配合CSS排版，模拟标准分数的上下分子/分母样式：

CSS 代码 #

.fraction {
  display: inline-block;
  text-align: center;
  font-size: 100px;
}
.numerator, .denominator {
  padding: 10px;
  font-weight: bold;
  font-size: 30px;
}
.line {
  border-top: 2px solid black;
  width: 100%;
}

HTML 代码 #

<div class="fraction">
  <div class="numerator">100 - g</div>
  <div class="line"></div>
  <div class="denominator">100</div>
</div>

二、添加大括号效果 #

针对分数添加大括号，提供两种简单可行的方案：

方案1：直接使用Unicode大括号字符 #

利用Unicode的大括号符号，配合Flex布局实现对齐，代码简洁易维护：

补充CSS

.formula {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 100px;
}
.brace {
  font-weight: bold;
}

对应HTML

<div class="formula">
  <span class="brace">{</span>
  <div class="fraction">
    <div class="numerator">100 - g</div>
    <div class="line"></div>
    <div class="denominator">100</div>
  </div>
  <span class="brace">}</span>
</div>

方案2：CSS伪元素自定义大括号 #

如果Unicode字符的高度无法匹配分数整体高度，可通过CSS伪元素生成适配性更强的括号样式：

CSS 代码

.formula-wrap {
  position: relative;
  display: inline-block;
}
.formula-wrap::before, .formula-wrap::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 100%;
  border: 3px solid black;
  border-top: none;
  border-bottom: none;
  top: 0;
}
.formula-wrap::before {
  left: -25px;
  border-right: none;
  border-radius: 8px 0 0 8px;
}
.formula-wrap::after {
  right: -25px;
  border-left: none;
  border-radius: 0 8px 8px 0;
}

对应HTML

<div class="formula-wrap">
  <div class="fraction">
    <div class="numerator">100 - g</div>
    <div class="line"></div>
    <div class="denominator">100</div>
  </div>
</div>

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