如何用CSS无需复杂多边形按指定角度裁剪圆形？

API 探路者

2026-7-2

时钟时间段高亮覆盖层的简便实现方案

不用JS生成多边形的替代思路

别折腾动态clip-path多边形了，用CSS的锥形渐变+遮罩就能搞定，性能拉满还不用算坐标。

具体怎么写

用conic-gradient直接画扇形高亮区
锥形渐变天生就是按角度分布的，想高亮哪个时间段，直接写起始和结束角度就行，比如要亮0到90度，直接给渐变设置角度范围，省得算一堆多边形顶点。
加个圆形遮罩把多余部分裁掉
用mask: circle()把渐变裁成圆形，刚好匹配时钟的形状，完美贴合。

替换你的代码试试

把原来的.line样式换成这个：

.highlight-overlay {
  width: 400px;
  height: 400px;
  position: relative;
  background: conic-gradient(rgba(0, 119, 255, 0.575) 0deg 90deg, transparent 90deg 360deg);
  mask: circle(50% at center);
}

HTML部分简化成这样：

<div style="width: 600px;">
  <p style="display: none;">TIMEAPI RESULTS || <button id="fetchapiBtn">Fetch</button></p>
  <div id="clock_visual">
    <div id="clock_indicators">
      <div class="highlight-overlay"></div>
    </div>
  </div>
  <div id="api_results"></div>
</div>

动态改高亮范围也简单

要根据时间调整高亮时间段？直接用JS改CSS的渐变角度就行，比生成多边形快多了：

const overlay = document.querySelector('.highlight-overlay');
// 示例：高亮30度到120度的区域
const start = 30;
const end = 120;
overlay.style.background = `conic-gradient(rgba(0, 119, 255, 0.575) ${start}deg ${end}deg, transparent ${end}deg 360deg)`;