Calculating square-roots with CSS

As others suggested, if dealing with repeat values, just use a preprocessor, or copy/paste if from the calculator directly, e.g. sqrt(2) = 1.4142135623730950488016887242097.

But if you really have to use a dynamic way to calculate the square root in CSS dynamically and without JS, there is of course. While a precision of 5 seems enough for most cases, for the number 7200 in your example we should bump it up to a precision of 9+, unless you could make an initial guess, which is closer to the result, but that’s out of question for now.

But without optimization this will bloat your document by 50.000+ extra characters, if using the generated output from the other answer/suggestion.

Since we use it dynamically, we ought to use CSS variables, which limits the browser compatibility a bit, but it already has a global support of about 88% by now (Mar/2018).

Here we go:

#test {
    --number: 7200;
    --guess01: calc((var(--number) + ( var(--number) / var(--number))) / 2);
    --guess02: calc((var(--guess01) + ( var(--number) / var(--guess01))) / 2);
    --guess03: calc((var(--guess02) + ( var(--number) / var(--guess02))) / 2);
    --guess04: calc((var(--guess03) + ( var(--number) / var(--guess03))) / 2);
    --guess05: calc((var(--guess04) + ( var(--number) / var(--guess04))) / 2);
    --guess06: calc((var(--guess05) + ( var(--number) / var(--guess05))) / 2);
    --guess07: calc((var(--guess06) + ( var(--number) / var(--guess06))) / 2);
    --guess08: calc((var(--guess07) + ( var(--number) / var(--guess07))) / 2);
    --guess09: calc((var(--guess08) + ( var(--number) / var(--guess08))) / 2);
    --guess10: calc((var(--guess09) + ( var(--number) / var(--guess09))) / 2);

    width:calc(50% - (var(--guess10) * 1px));
    height:200px;
    background: black;
    padding:20px;
    color:#fff;
}
<div id="test">Width is 50% - sqrt(7200) in px</div>

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)