drawing a square root sign with css

Issue

I would like to "draw" a scalable square root sign with CSS; my current attempt is:

.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>

(The line breaks in examples 2 and 3 are only simple replacements for larger arguments such as fractions, matrices etc.) My questions and wish list are:

• The two parts (radix1 and radix2 span) fit together (horizontally, at the bottom line) only in the first example. How can I insert additional margin(?) between radix1 and radix2 depending on the total height of the square root?
• How can I scale the height of radix1 depending on total height of the square root? (E.g. height: 40%; does not work, but would be nice.)
• And of course: Is there another way to do this (better)?

Solution

You may try something like this by using only one element to create the root square. Then use a pseudo-element for the small part so you can easily adjust its position relative to the main part.

.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>

Answered By - Temani Afif