3

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.

yunzen
  • 32,854
  • 11
  • 73
  • 106
  • @DBS But if I remove the border, it's the same issue again – yunzen Sep 16 '20 at 13:26
  • "Percentages refer to reference box when specified, otherwise border-box" https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path removing border-box should have no effect – Sam Sep 16 '20 at 13:33
  • @Sam Yep, that seems to have been a red-herring due to the border, as yunzen pointed out. – DBS Sep 16 '20 at 13:39
  • @Sam the details are here: https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape .. it's based on the width AND the height (not intuitive but there is a logic behind) – Temani Afif Sep 16 '20 at 14:10
  • what you want cannot be done with clip-path but easily done with mask: https://jsfiddle.net/tg0z6pnw/3/ (considering the fact that the height is always smaller than the width, if it's the opposite use farthest-side) – Temani Afif Sep 16 '20 at 14:21
  • 1
    ERATA: it can also be done with clip-path: https://jsfiddle.net/eso1jkLa/ forget that they consider keywords like closest-side – Temani Afif Sep 16 '20 at 14:27
  • @TemaniAfif You are the man! – yunzen Sep 16 '20 at 14:33

0 Answers0