How to Create a Circle with a Partial Border Using HTML5 and CSS3?

Creating a Circle with Partial Border in HTML5 / CSS3

It is indeed possible to create a circle with a partial border using HTML5 and CSS3. One effective technique involves using multiple layers of masks to achieve the desired effect.

2024 Solution:

This method utilizes two layers of masking without the need for JavaScript, additional elements, or pseudos. It remains functional even when the element has a semi-transparent background. It involves:

1. Establishing a circular element (arbitrary width, aspect ratio of 1, border-radius of 50%), with a specified border.
2. Defining a conic-gradient mask relative to the border-box, covering a particular percentage of the element's area (e.g., 17%).
3. Adding a full-cover mask layer restricted to the padding-box.

Here's an example CSS code snippet:

<code class="css">.circular-progress {
  border: solid 1.5em hotpink;
  width: 50vmin;
  aspect-ratio: 1;
  border-radius: 50%;
  background: hsla(180, 100%, 50%, .5);
  mask:
    linear-gradient(red 0 0) padding-box,
    conic-gradient(red var(--p, 17%), transparent 0%) border-box;
}

/* for visual clarity with a semi-transparent background */
body {
  background: url(image-url) 50%/cover;
}</code>

This method is effective in creating a circle with a partial border, and it remains unaffected by the element's background transparency.

The above is the detailed content of How to Create a Circle with a Partial Border Using HTML5 and CSS3?. For more information, please follow other related articles on the PHP Chinese website!