How to Create Circular Shapes with Partial Borders Using Only CSS in 2024?

Creating Circles with Partial Borders in HTML5/CSS3

When tasked with creating a circular shape with a partially visible border using HTML5/CSS3, the question arises if it's even possible. This article will explore various techniques to achieve this effect, focusing on the 2024 solution.

2024 Solution: A Cutting-Edge Approach

The 2024 solution operates without JavaScript, additional elements, or pseudo-elements. It solely relies on CSS declarations and performs exceptionally well even with semi-transparent backgrounds.

This innovative approach involves a double-layer mask:

• Layer 1 (Conic-Gradient Mask): This mask utilizes a conic-gradient relative to the border-box, revealing a customizable portion (controlled by --p) of the circle, starting from 12 o'clock in a clockwise direction.
• Layer 2 (Full Coverage Mask): This mask encompasses the entire area within the padding-box, ensuring that the border remains firmly within the circle's perimeter.

Code Snippet

The following code sample showcases the 2024 solution:

<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
}

/* To demonstrate compatibility with semi-transparent backgrounds */
body {
  background: 
    url(https://images.unsplash.com/photo-1693483923875-cdd9ef4a8046?w=800) 
      50%/ cover
}</code>

<code class="html"><div class="circular-progress"></div></code>

With this CSS code, you can now effortlessly create circular shapes with borders that are partially visible. The --p variable provides flexibility in controlling the visible portion of the border, making it a versatile solution for a range of design needs.

The above is the detailed content of How to Create Circular Shapes with Partial Borders Using Only CSS in 2024?. For more information, please follow other related articles on the PHP Chinese website!