title: drawing a square root sign with css
body: <p>I would like to "draw" a scalable square root sign with CSS; my current attempt is:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Lore ipsum
  &lt;span class="root"&gt;
    &lt;span class="radix1"&gt;&lt;/span&gt;
      &lt;span class="radix2"&gt;
        &lt;span class="radicand"&gt;
          2&lt;var&gt;xy&lt;/var&gt;
        &lt;/span&gt;
      &lt;/span&gt;
  &lt;/span&gt;
  lore ipsum.&lt;/p&gt;
  &lt;p&gt;Lore ipsum
  &lt;span class="root"&gt;
    &lt;span class="radix1"&gt;&lt;/span&gt;
      &lt;span class="radix2"&gt;
        &lt;span class="radicand"&gt;
          2&lt;var&gt;x y&lt;/var&gt;&lt;br /&gt;2&lt;var&gt;pq&lt;/var&gt;
        &lt;/span&gt;
      &lt;/span&gt;
  &lt;/span&gt;
  lore ipsum.&lt;/p&gt;
  &lt;p&gt;Lore ipsum
  &lt;span class="root"&gt;
    &lt;span class="radix1"&gt;&lt;/span&gt;
      &lt;span class="radix2"&gt;
        &lt;span class="radicand"&gt;
          2&lt;var&gt;xy&lt;/var&gt;&lt;br /&gt;2&lt;var&gt;pq&lt;/var&gt;&lt;br /&gt;123,456,789
        &lt;/span&gt;
      &lt;/span&gt;
  &lt;/span&gt;
  lore ipsum.&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <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:</p>
  
  <ul>
  <li>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?</li>
  <li>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.)</li>
  <li>And of course: Is there another way to do this (better)?</li>
  </ul>