Calculating square-roots with CSS

css

Solution

Square root

Coming here to say that the square root is now a CSS function working in CSS, and is already used in most browsers today. It was recently implemented.

div {
  width: calc(sqrt(36) * 10px);
  /* sqrt(36) will be 6, so 6 * 10px will be 60px */

  height: calc(sqrt(25) * 10px);
  /* sqrt(25) will be 5, so 5 * 10px will be 50px */
}

/* other stuff */
div { background: red;padding: 20px;margin: 20px auto;border: 10px solid #fcc;border-radius: 20px;font-family: sans-serif;color: #eee;display: flex;align-items: center;justify-content: center;}

<div>I'm a div</div>

Cube root

If you need to, you can specify the cube root like this (which also works in most browsers):

div {
  width: calc(pow(125, 1 / 3) * 10px);
  /* cubed root of 125 will be 5, so 5 * 10px will be 50px */

  height: calc(pow(64, 1 / 3) * 10px);
  /* cubed root of 64 will be 4, so 4 * 10px will be 40px */
}

/* other stuff */
div { background: red;padding: 20px;margin: 20px auto;border: 10px solid #fcc;border-radius: 20px;font-family: sans-serif;color: #eee;display: flex;align-items: center;justify-content: center;}

<div>I'm a div</div>

Mathematically speaking, we can use the cube root of a number as the number itself raised to 1/3, and the same thing with the square root of a number being the number raised to 1/2, and so on So we use the pow css function.

Hypotenuse

But maybe you're here looking for this to do some hypotenuse, as we also have a function for this already working in most browsers!

Unlike sqrt and pow, the hypotenuse accepts units.

I will use the famous right triangle `3, 4, 5` to exemplify. If I put the legs of the triangle as 3 and 4, the hypotenuse has to be 5. In the example below I used the legs as `30px`, `40px`, so the hypotenuse will be `50px`.

div {  
  width: hypot(30px, 40px);
  height: hypot(30px, 40px);
}

/* other stuff */
div { background: red;padding: 20px;margin: 20px auto;border: 10px solid #fcc;border-radius: 20px;font-family: sans-serif;color: #eee;display: flex;align-items: center;justify-content: center;}

<div>I'm a div</div>

Hope this helps! ;D

Also thanking mountarreat answer for the workaround here as I used this while I didn't have these css functions available, and also for learning a technique for solving the square root that I had never learned before haha

Problem

Is it possible to do a square-root function in the calc() function of my CSS file? I've read that calc() only supports the basic operators like + - * and /. Ideally, it'd look something like this: ``` width: calc(50% - (sqrt(7200))px); ``` If calc() do not have a sqrt function, what can I do?

Original source