是this个问题的重复，显然太含糊了.
我想在有特定要求的css中使用剪辑路径来剪辑元素.我一直在摆弄它，阅读MDN文档，但不知道如何做到这一点，甚至不知道它是否可以做到.
剪辑路径应该是一个完美的圆形(所以我在考虑circle函数)，它的左侧与要剪辑的元素的左侧对齐.圆应该通过获得要剪裁的元素的高度来获得其直径，并将其乘以3(因此，圆应该是要剪裁的元素高度的300%).
以下是我正在努力实现的一个例子:
其中红色部分是我的内容，也就是我想要保留/显示的元素部分.元素可以有不同的宽度和高度，剪辑路径应该适应这一点.
Clarification edit个 我不知道要裁剪的元素会有多大.这个问题的全部要点是，剪辑路径应该适应任何元素.
@Temani提供了很好的 idea ，但在这次比赛中farthest-side是不正确的.
长方体的宽度并不重要，让高度为1，则半径应为1.5. 圆的圆心应为(1.5，0.5).
const boxElement = document.getElementById("box");
const height = parseFloat(boxElement.offsetHeight);
const radius = height * 1.5;
boxElement.style.clipPath = `circle(${radius}px at ${radius}px ${height / 2}px)`;#box {
width: 200px;
height: 100px;
background: red;
}<div id="box"></div>