What css linear-gradient do I need to achieve this effect? Transparent only at certain small points

Question

Expected:

What I have so far:

I have these white dots on a progress bar for video js. I've appended these white dots as children of the grey progress bar. So these white dots are sitting on top of the progress bar. However, I need the grey progress bar to be transparent at these certain points. How can I achieve this effect with css? I'm thinking to use linear-gradient to make the progress bar transparent at these small little points. Is this the right approach?

Here's my DOM structure:

<div class="vjs-slider">
  <div class="vjs-marker" style="left: 55.3719%;"></div>
    <div class="vjs-marker-dot"></div>
  <div class="vjs-marker" style="left: 6.61157%;"></div>
    <div class="vjs-marker-dot"></div>
</div>

The greater context: I want to achieve this progress bar timeline for video.js chapter markers. Chapter markers aren't supported by video.js so I have to build these chapter markers myself and append it to the DOM elements and use CSS to style.

Any help will be greatly appreciated. Thank you!

Answer 1

You could use a combination of radial gradients, making the dot element wider with semicircles at each side which are the same height as the bar.

Here's a simple example.

<style>
  * {
    margin: 0;
  }
  
  .container {
    width: 100vw;
    height: 100vh;
    background: black;
    background-image: linear-gradient(transparent 0 50px, gray 50px 70px, transparent 50px 100%);
    position: relative;
  }
  
  .dot {
    position: absolute;
    top: 49px;
    left: 200px;
    background: black;
    background-image: radial-gradient(circle, gray 0 10px, black 10px 100%), radial-gradient(circle, white 0 10px, black 10px 100%), radial-gradient(circle, gray 0 10px, black 10px 100%);
    background-position: -10px center, center center, 50px center;
    width: 60px;
    height: 21px;
    background-repeat: no-repeat;
    background-size: 20px 20px;
  }
</style>
<div class="container">
  <div class="dot"></div>
</div>

Note that you can get 'edge effects' when an element is positioned - part CSS (whole screen) pixels being 'left behind' so a thin spurious line is seen.

For this reason the dot element is made 1px higher than the bar and is positioned 1px above it to give enough overlap so these extra lines are not seen.