Arc shape with rounded edges 관련

CSS > Article(s)

---

Article(s)

• More CSS Tips

---

Arc shape with rounded edges

a few lines of modern CSS to create an arc shape with rounded edges

Create an arc shape with rounded edges using a few lines of CSS

• Single element (no pseudo-element)
• Less than 10 CSS declarations
• Supports gradient coloration
• Optimized with CSS variables

A 3D shine animation on image

.arc {
  --b: 30px; /* the boder thickness */
  --a: 220deg; /* control the progression */
  
  width: 200px;
  aspect-ratio: 1;
  padding: var(--b);
  box-sizing: border-box;
  border-radius: 50%;
  background: linear-gradient(#CC333F,#8A9B0F);
  --_g:/var(--b) var(--b) no-repeat
    radial-gradient(50% 50%,#000 calc(100% - 1px),#0000);
  mask:
    top var(--_g),
     calc(50% + 50%*sin(var(--a))) 
     calc(50% - 50%*cos(var(--a))) var(--_g),
    linear-gradient(#0000 0 0) content-box intersect,
    conic-gradient(#000 var(--a),#0000 0);
}

See Arc shape with rounded edges by t_afif on CodePen.

More CSS Shapes

The Ultimate CSS Shapes Collection

The modern way to create CSS shapes using a minimal code and a single element. A collection of CSS-only shapes created by Temani Afif.

---

More CSS Tips

• Quantity queries using has() selector a simple way to generate a quantity query selector using modern CSS. August 26, 2024
• A decorative line with rounded dashes A few lines of code to create a nice decoratinve line with rounded dashes. August 15, 2024
• Count the number of lines inside a text A CSS-only solution to count the lines of text. July 29, 2024
• Get the width & height of any element without JavaScript Using modern CSS to get the size of any element as CSS variables. July 26, 2024

Arc shape with rounded edges

---

a few lines of modern CSS to create an arc shape with rounded edges