是否可以从右边缘定位剪辑路径？

Question

我有一个汉堡包图标，它位于距右边缘和上边缘 2rem 的位置，我希望剪辑路径从它后面的中心点开始增长，这很容易计算，但是 clip-path: circle(10px at center);语法，我一直无法找到 right 2rem top 2rem.

的任何内容

这甚至可能吗，还是我需要改用 SVG 遮罩？

Answer 1

您需要考虑百分比值：

.box {
  width:150px;
  height:150px;
  background:red;
  clip-path: circle(50px at 100% 50%); /* left 100% (right) top 50% (center)*/
  
  /* 0    0    = left top
     0    100% = left bottom
     100% 0    = right top
     100% 100% = right bottom
     ... and so on
  */
}

<div class="box">

</div>

那么offset

可以考虑calc()

.box {
  width:150px;
  height:150px;
  background:red;
  clip-path: circle(50px at calc(100% - 2rem) 50%); 
}

<div class="box">

</div>

是否可以从右边缘定位剪辑路径？

Is there an ability to position clip-path from right edge?

css

clip-path