Question

我正在尝试动态设置clip-path: circle(radius)的半径，以使其适合其所在的任何大小的容器（周围有一些额外的空间）。例如，如果容器为1000x500，则整个圆圈应为500px的2 / 3rds。

我尝试将半径设置为一个简单的百分比，例如33％，这应该使整个圆为2 / 3rds，但是根据容器的大小，半径可能太大也可能太小。

看一下基本形状的文档，半径的百分比由容纳盒sqrt(width^2+height^2)/sqrt(2)的宽度和高度决定，但是我不知道如何实际使用它来进行计算。

有人知道我能做什么吗？我正在为这些值设置动画，因此我确实需要通过clip-path完成。

Answer 1

您可以使用mask进行同样的操作，而无需进行任何计算

.box {
  display:inline-block;
  vertical-align:top;
  background:url(https://picsum.photos/id/1074/800/800) center/cover no-repeat;

  -webkit-mask:radial-gradient(circle closest-side,#fff 99%,transparent 100%);
          mask:radial-gradient(circle closest-side,#fff 99%,transparent 100%);
}

<div class="box" style="width:200px;height:100px"></div>

<div class="box" style="width:100px;height:200px"></div>

<div class="box" style="width:300px;height:300px"></div>

说明其工作原理：

.box {
  display:inline-block;
  vertical-align:top;
  border:2px solid;
  background:
     radial-gradient(circle closest-side,transparent 99%,red 100%),
     url(https://picsum.photos/id/1074/800/800) center/cover no-repeat;
}

<div class="box" style="width:200px;height:100px"></div>

<div class="box" style="width:100px;height:200px"></div>

<div class="box" style="width:300px;height:300px"></div>

您还可以添加动画：

.box {
  display:inline-block;
  vertical-align:top;
  background:url(https://picsum.photos/id/1074/800/800) center/cover no-repeat;

  -webkit-mask:radial-gradient(circle closest-side,#fff 99%,transparent 100%) center/100% 100% no-repeat;
          mask:radial-gradient(circle closest-side,#fff 99%,transparent 100%) center/100% 100% no-repeat;
   transition:0.5s;
}
.box:hover {
   -webkit-mask-size:0% 0%;
           mask-size:0% 0%;
}

<div class="box" style="width:300px;height:300px"></div>
<div class="box" style="width:200px;height:100px"></div>

JS / CSS剪切路径-如何计算圆的半径？

1 个答案: