How to clip a part of a circle with a certain angle in CSS, without complex polygon

Issue

I am trying to make a clock that highlights certain time frames. I am going to handle the time part but what is bothering me is how do I trim a part of the overlay I have for showing the time?

The problem is that I don't want to dynamically make a javascript engine to create a polygon for a specific angle, it's just time-consuming. Is there a simple way to do it? I have tried a lot of ways and I can't find a proper method to do it, I am new to clip-path.

.line {
  width: 380px;
  height: 380px;
  background-color: rgba(0, 119, 255, 0.575);
  position: relative;
  border-radius: 800px;
  left: 10px;
  top: 10px;
  clip-path: polygon(0% 0%, 50% 0%, 50% 50%, 100% 50%, 100% 100%, 0% 100%);
}

<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 style="transform: rotate(0deg);" class="line"></div>
    </div>
  </div>
  <div id="api_results"></div>
</div>

Solution

Expanding on @Paulie_D's comment under the question, a more simple approach would be to use a conic-gradient, set to the angle matching the minutes value set in your UI.

Here's a working example, using a range slider to set the minutes which are then reflected in the div:

const div = document.querySelector('#clock');
const minutes = document.querySelector('span');

document.querySelector('#minutes').addEventListener('input', e => {
  const angle = e.target.value * (360 / 60);
  div.style.backgroundImage = `conic-gradient(transparent ${angle}deg, #C00 0deg)`;
  minutes.textContent = e.target.value;
});

div {
  width: 50vh;
  height: 50vh;
  border: 1px solid red;
  border-radius: 50%;
  background: conic-gradient(transparent 120deg, #C00 0deg);
}

<div id="clock"></div>

<input type="range" value="20" step="1" max="60" id="minutes" />
<p>
  Minutes:
  <span>20</span>
</p>

Answered By - Rory McCrossan