根据剪辑路径计算得出的100％半径是什么

问题描述

检查此代码

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>

第一个div具有
clip-path: circle(calc(100% / 2 / 16 * 9) at 50% 50%);，第二个有
clip-path: circle(calc(160px / 2 / 16 * 9) at 50% 50%);

计算基于16：9的div的纵横比。 我想使圆形剪切路径的半径为高度的一半，但不知道确切的像素宽度。我认为100%通常是指宽度，所以在这里是一样的，但是不是。

现在两个div的宽度均为160像素。 我希望两个剪切路径圆都具有相同的半径。
计算出的半径大约是短的1.23倍。

解决方法

这里的100％代表高度而不是宽度，因为当一个圆被刻在矩形中时，最大圆的半径将等于其高度，即90px + 30px border width-top = 120px。 因此，在计算半径后，您将获得#one div的33.75px #two div为45px尝试使用120px而不是100％，您将获得相同的结果。