Question 232249 in CSS Question posted in
Some basic documentation can be found here.

Diagonal length of viewport using plain CSS

My goal is to create a absolutely-positioned circle with radius equal to the viewport’s (sv*) diagonal length.

enter image description here

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?

Tags:

2

Answers


  1. 0

    A simple alternative would be to add the viewport width and height together, and use that as your radius.

    const toggle = () => {
  document.querySelector('.d1').classList.toggle('big')
  setTimeout(toggle, 4000)
}
setTimeout(toggle, 1000)
    body {
  margin: 0;
}
.d1 {
  width: 10px;
  aspect-ratio: 1/1;
  background: red;
  border-radius: 9999px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 2s ease-in-out;
}
.big {
  width: calc(100vh + 100vw);
  background: blue;
}
    <div class="d1"></div>
    Login or Signup to reply.
  2. 0

    If you consider clip-path, you don’t need complex math

    .box {
  position: absolute;
  inset: 0;
  background: red;
  clip-path: circle(50px); /* starting value */
  transition: all 2s ease-in-out;
}
html:hover .box {
  clip-path: circle(71%); /* 71% ~ 100%/sqrt(2) */
}
    <div class="box"></div>

    You can easily adjust the position of the clip-path:

    .box {
  position: absolute;
  inset: 0;
  background: red;
  clip-path: circle(50px at top right); /* starting value */
  transition: all 2s ease-in-out;
}
html:hover .box {
  clip-path: circle(71%); /* 71% ~ 100%/sqrt(2) */
}
    <div class="box"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search