My goal is to create a absolutely-positioned circle with radius equal to the viewport’s (sv*
) diagonal length.
I tried calculating the diagonal length of the viewport based on the width and height using the Pythagorean Theorem like so:
.circle {
--radius: sqrt(calc(calc(100svw * 100svw) + calc(100svh * 100svh)));
...
}
but this failed because in calc
multiplication, at least one of the arguments has to be a number.
I know with JavaScript it’s possible to calculate the diagonal length of the viewport, but is it possible with plain CSS?
2
Answers
A simple alternative would be to add the viewport width and height together, and use that as your radius.
If you consider
clip-path
, you don’t need complex mathYou can easily adjust the position of the clip-path: