如何实现曲线型顶部指针

<div class="pointer-container">
  <div class="pointer"></div>
</div>

.pointer-container {
  width: 100%;
  height: 200px; /* 调整高度以适应需要 */
  position: relative;
}

.pointer {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red; /* 可自定义颜色 */
  position: absolute;
  top: 0;
}

const pointerContainer = document.querySelector('.pointer-container');
const pointer = document.querySelector('.pointer');

function calculateCurvePath(containerWidth) {
  const curveHeight = 100; // 调整曲线高度以适应需要
  const curveWidth = containerWidth * 0.8; // 调整曲线宽度以适应需要
  const curveCenter = containerWidth / 2;
  const curveStart = curveCenter - curveWidth / 2;
  const curveEnd = curveCenter + curveWidth / 2;

  const path = `
    M ${curveStart} 0
    Q ${curveCenter} ${curveHeight}
    ${curveEnd} 0
  `;

  pointerContainer.style.height = curveHeight + 'px';
  pointer.style.transformOrigin = `${curveCenter}px ${curveHeight}px`;
  pointer.style.transform = `translateX(${curveStart}px)`;

  return path;
}

window.addEventListener('resize', () => {
  const containerWidth = pointerContainer.offsetWidth;
  const path = calculateCurvePath(containerWidth);
  pointer.style.transform = `translateX(${path})`;
});

// 初始加载时计算路径并应用
const containerWidth = pointerContainer.offsetWidth;
const path = calculateCurvePath(containerWidth);
pointer.style.transform = `translateX(${path})`;