{"id":386673,"date":"2025-05-30T07:45:43","date_gmt":"2025-05-30T13:45:43","guid":{"rendered":"https:\/\/css-tricks.com\/?p=386673"},"modified":"2025-07-07T06:48:48","modified_gmt":"2025-07-07T12:48:48","slug":"better-css-shapes-using-shape-part-2-more-on-arcs","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/better-css-shapes-using-shape-part-2-more-on-arcs\/","title":{"rendered":"Better CSS Shapes\u00a0Using shape() \u2014 Part 2: More on Arcs"},"content":{"rendered":"\n

Ready for the second part? We are still exploring the shape()<\/code> function, and more precisely, the arc command. I hope you took the time to digest the first part<\/a> because we will jump straight into creating more shapes!<\/p>\n\n\n\n

As a reminder, the shape()<\/code> function is only supported in Chrome 137+ and Safari 18.4+ as I’m writing this in May 2025.<\/p>\n\n\n\n\n\n\n\n

Better CSS Shapes Using shape()<\/code><\/h4>\n\n\n
    \n
  1. Lines and Arcs<\/a><\/li>\n\n\n\n
  2. More on Arcs (you are here!)<\/li>\n\n\n\n
  3. Curves<\/a><\/li>\n\n\n\n
  4. Close and Move<\/a><\/li>\n<\/ol>\n<\/div><\/div>\n\n\n

    Sector shape<\/h3>\n\n\n

    Another classic shape that can also be used in pie-like charts.<\/p>\n\n\n\n

    \"A<\/figure>\n\n\n\n

    It\u2019s already clear that we have one arc. As for the points, we have two points that don\u2019t move and one that moves depending on how much the sector is filled.<\/p>\n\n\n\n

    \"Diagram<\/figure>\n\n\n\n

    The code will look like this:<\/p>\n\n\n\n

    .sector {\n  --v: 35; \/* [0 100]*\/\n  \n  aspect-ratio: 1;\n  clip-path: shape(from top, arc to X Y of R, line to center);\n}<\/code><\/pre>\n\n\n\n
    We define a variable that will control the filling of the sector. It has a value between 0<\/code> and 100<\/code>. To draw the shape, we start from the top<\/code>, create an arc until the point (X, Y), and then we move to the center<\/code>.<\/p>\n\n\n\n
    \n
    Are we allowed to use keyword values like top<\/code> and center<\/code>?<\/p>\n<\/blockquote>\n\n\n\n
    Yes! Unlike the polygon()<\/code> function, we have keywords for the particular cases such as top<\/code>, bottom<\/code>, left<\/code>, etc. It\u2019s exactly like background-position<\/code> that way. I don\u2019t think I need to detail this part as it\u2019s trivial, but it\u2019s good to know because it can make your shape a bit easier to read.<\/p>\n\n\n\n
    The radius of the arc should be equal to 50%<\/code>. We are working with a square element and the sector, which is a portion of a circle, need to fill the whole element so the radius is equal to half the width (or height).1<\/a><\/sup><\/p>\n\n\n\n
    As for the point, it\u2019s placed within that circle, and its position depends on the V value. You don\u2019t want a boring math explanation, right? No need for it, here is the formula of X and Y:<\/p>\n\n\n\n
    X = 50% + 50% * sin(V * 3.6deg)\nY = 50% - 50% * cos(V * 3.6deg)<\/code><\/pre>\n\n\n\n
    Our code becomes:<\/p>\n\n\n\n
    .sector {\n  --v: 35; \/* [0 100] *\/\n  \n  aspect-ratio: 1;\n  clip-path: shape(from top,\n    arc to calc(50% + 50% * sin(var(--v) * 3.6deg)) \n           calc(50% - 50% * cos(var(--v) * 3.6deg)) of 50%,\n    line to center);\n}<\/code><\/pre>\n\n\n\n