用css画一个方形根标志

Question

我想用CSS“绘制”可扩展的平方根符号;我目前的尝试是：

.root {
  display: inline-block;
  vertical-align: middle;
}
.radix1 {
  display: inline-block;
  width: 0.2em;
  height: 1.5ex;
  vertical-align: bottom;
  border-top: 0.2ex solid;
  border-right: 0.15ex solid;
  transform: skew(25deg);
}
.radix2 {
  display: inline-block;
  vertical-align: bottom;
  border-top: 0.2ex solid;
  border-left: 0.15ex solid;
  transform: skew(-15deg);
}
.radicand {
  display: inline-block;
  padding-left: 0.5em;
  transform: skew(15deg);
}

<p>Lore ipsum
<span class="root">
  <span class="radix1"></span>
    <span class="radix2">
      <span class="radicand">
        2<var>xy</var>
      </span>
    </span>
</span>
lore ipsum.</p>
<p>Lore ipsum
<span class="root">
  <span class="radix1"></span>
    <span class="radix2">
      <span class="radicand">
        2<var>x y</var><br />2<var>pq</var>
      </span>
    </span>
</span>
lore ipsum.</p>
<p>Lore ipsum
<span class="root">
  <span class="radix1"></span>
    <span class="radix2">
      <span class="radicand">
        2<var>xy</var><br />2<var>pq</var><br />123,456,789
      </span>
    </span>
</span>
lore ipsum.</p>

（示例2和3中的换行符只是对较大参数的简单替换，例如分数，矩阵等。）我的问题和愿望清单是：

• 两个部分（radix1和radix2 span）仅在第一个示例中（水平地，在底线）配合在一起。如何在radix1和radix2之间插入额外的边距（？），具体取决于平方根的总高度？
• 如何根据平方根的总高度来缩放基数1的高度？ （例如身高：40％;不起作用，但会很好。）
• 当然：还有另一种方法可以做到这一点（更好）吗？

Answer 1

您可以通过仅使用一个元素来创建根方形来尝试这样的事情。然后对小部件使用伪元素，以便您可以轻松调整其相对于主要部分的位置。

.root {
  display: inline-block;
  vertical-align: middle;
  border-top: 1px solid;
  border-left: 1px solid;
  transform: skew(-15deg);
  transform-origin: bottom left;
  margin: 0 10px;
  position: relative;
}

.root:before {
  content: "";
  position: absolute;
  bottom: 0;
  height: 40%;
  width: 5px;
  left: -5px;
  border-top: 1px solid;
  border-right: 1px solid;
  transform: skew(30deg);
  transform-origin: bottom right;
}

.radicand {
  display: inline-block;
  padding-left: 0.5em;
  transform: skew(15deg);
}

<p>Lore ipsum
  <span class="root">
      <span class="radicand">
        2<var>xy</var>
</span></span> lore ipsum.</p>
<p>Lore ipsum
  <span class="root">
      <span class="radicand">
        2<var>x y</var><br>2<var>pq</var>

  </span> </span> lore ipsum.</p>
<p>Lore ipsum
  <span class="root">
      <span class="radicand">
        2<var>xy</var><br>2<var>pq</var><br>123,456,789
 
  </span> </span>lore ipsum.</p>