What is 100% radius based on in clip-path calculation

Viewed 71

Check this code

div {
  width: 160px;
  height: 90px;
  background-color: gold;
  border: solid red;
  border-width: calc(90px / 3) 0;
  box-sizing: border-box;
}

#one {
  -webkit-clip-path: circle(calc(100% / 2 / 16 * 9) at 50% 50%);
          clip-path: circle(calc(100% / 2 / 16 * 9) at 50% 50%);
}

#two {
  -webkit-clip-path: circle(calc(160px / 2 / 16 * 9) at 50% 50%);
          clip-path: circle(calc(160px / 2 / 16 * 9) at 50% 50%);
}
<div id="one"></div>
<div id="two"></div>

The first div has
clip-path: circle(calc(100% / 2 / 16 * 9) at 50% 50%); and the second has
clip-path: circle(calc(160px / 2 / 16 * 9) at 50% 50%);

The calculation is based on the aspect ratio of the div of 16:9. I want to have the circle clip path to have a radius of half the height, but without knowing the exact pixel width. Since 100% normally refers to the width, I thought, it would be the same here, but it isn't.

Now 160 pixel is the width of both the divs. What I would expect is that both clip path circles are of the same radius.
The calculated radius is around 1.23 times to short.

0 Answers
Related