How to Create a Partial Border on a Circle Using CSS?

Creating a Circle with a Partial Border Using HTML5 / CSS3

Is it possible to create a circle with a border that extends only partially around its perimeter using HTML5 / CSS3? While the HTML5 and CSS3 specifications do not directly support this, there are techniques that can achieve this effect.

CSS-Only Method

A method that requires minimal JavaScript and external elements involves manipulating CSS masks:

.circular-progress {
  border: 1.5em solid 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
}

This CSS creates a circular element with a hotpink border and a semitransparent background. The conic-gradient mask covers a percentage of the element, starting from 12 o'clock and going clockwise. A linear-gradient mask is then applied on top, restricted to the padding-box to create the partial border effect.

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