创建一个圆形剪辑路径，其高度始终为剪辑元素的 300% 并左对齐

Question

与this问题重复，这显然太模糊了。

我想使用CSS中的剪辑路径来剪辑元素，有特定的要求。我一直在摆弄它并阅读 MDN 文档，但不知道如何做到这一点，以及是否可以做到。

剪辑路径应该是一个完美的圆形（所以我正在考虑

circle

函数），其中左侧与要剪辑的元素的左侧对齐。圆应该通过获取要裁剪的元素的高度并将其乘以 3 来获得其直径（因此圆应该是要裁剪的元素的高度的 300%）。

这是我想要实现的目标的示例：

红色部分是我的内容，我想要保留/显示的元素部分。元素可以有不同的宽度和高度，剪辑路径应该适应这一点。

Answer 1

不确定是否可以获取高度，但获取宽度是可行的

.box {
  width: 200px;
  height: 150px;
  background: red;
  /* place the center at 300% from the farthest side (the left one) */
  clip-path: circle(farthest-side at 300% 50%);
}

<div class="box"></div>