How to draw a ring effect with notches in CSS?

CSS cleverly create a ring effect with notch

This article introduces an efficient CSS method to achieve the ring effect with notched and to flexibly adjust the angle of notch. This effect is often used in interface design, requiring other elements to be placed inside the ring or in the notch. Previous methods, such as using transparent borders or stacked rotation, appear more complicated when dealing with notches less than 90 degrees.

This article recommends using conic-gradient and mask combined with radial-gradient to solve this problem concisely and efficiently.

The following code shows how to create a blue ring with a 90-degree notch:

 .ring {
  width: 200px;
  height: 200px;
  background: conic-gradient(
    transparent 0deg,
    transparent 270deg,
    #3498db 270deg,
    #3498db 360deg
  );
  -webkit-mask: radial-gradient(transparent 60%, black 61%); /* Safari */
  mask: radial-gradient(transparent 60%, black 61%);
}

conic-gradient defines the shape and color of the ring. transparent 0deg, transparent 270deg creates transparent notched areas (0 degrees to 270 degrees), #3498db 270deg, #3498db 360deg defines blue ring parts (270 degrees to 360 degrees). radial-gradient acts as a mask to ensure that the inside of the ring remains transparent and facilitates the placement of other content.

To adjust the angle of the notch, just modify the angle value in conic-gradient . For example, to create a 45-degree gap, modify the code to:

 background: conic-gradient(
  transparent 0deg,
  transparent 315deg,
  #3498db 315deg,
  #3498db 360deg
);

This method is simple and easy to understand and can accurately control the angle of notch and ring color, making it an ideal solution for creating a notched ring effect. It avoids the complexity of traditional methods and can better adapt to a variety of background colors and design needs.

The above is the detailed content of How to draw a ring effect with notches in CSS?. For more information, please follow other related articles on the PHP Chinese website!