如何创建左对齐、直径为元素高度300%的自适应CSS clip-path圆形裁剪？

要实现你要的裁剪效果——左边缘与元素对齐、直径为元素高度3倍的圆形裁剪，且适配任意尺寸的元素，可以用以下两种方法：

方法一：纯CSS容器查询方案（推荐，现代浏览器支持） #

利用CSS容器查询的cqh单位（容器高度的1%），可以直接基于元素自身高度计算裁剪半径：

.clipped-element {
  /* 把元素设为自身的容器，才能用cqh单位 */
  container-type: size;
  /* 核心裁剪路径：圆心在左边缘垂直居中，半径是元素高度的1.5倍（直径就是3倍高度） */
  clip-path: circle(calc(1.5 * 100cqh) at left center);
}

代码解释 #

• container-type: size：开启容器查询功能，让元素成为自己的参考容器，这样100cqh就等于元素的实际高度。
• circle(...)：
  • calc(1.5 * 100cqh)：算出半径是元素高度的1.5倍，刚好满足直径为3倍高度的要求。
  • at left center：把圆心定位在元素左边缘、垂直中间的位置，保证圆形左边缘和元素左边缘完全对齐。

完整示例 #

<div class="clipped-element">
  不管元素宽高怎么变，裁剪区域始终是左对齐的3倍高圆形
</div>

<style>
.clipped-element {
  container-type: size;
  clip-path: circle(calc(1.5 * 100cqh) at left center);
  
  /* 以下是示例样式，按需修改 */
  width: 350px;
  height: 180px;
  background: #ff4444;
  display: flex;
  align-items: center;
  padding: 1.5rem;
  box-sizing: border-box;
  color: white;
  font-size: 1.2rem;
}
</style>

方法二：JS+CSS变量方案（兼容旧浏览器） #

如果需要兼容不支持容器查询的旧浏览器，可以用JS动态获取元素高度，再通过CSS变量传递给clip-path：

CSS部分 #

.clipped-element {
  /* 用CSS变量接收JS传递的元素高度 */
  clip-path: circle(calc(1.5 * var(--element-height)) at left center);
}

JS部分 #

const clippedEl = document.querySelector('.clipped-element');

// 设置裁剪半径的函数
function updateClipPath() {
  const elHeight = clippedEl.offsetHeight;
  clippedEl.style.setProperty('--element-height', `${elHeight}px`);
}

// 初始化执行
updateClipPath();

// 如果元素尺寸会随窗口变化，监听resize事件更新
window.addEventListener('resize', updateClipPath);

这两种方案都能完美适配任意尺寸的元素，不管元素宽高怎么变，裁剪区域都会保持你要的效果。

内容的提问来源于stack exchange，提问作者Guido Goluke