wip perfect angle fit

zumerlab · Apr 24, 2023 · 124d201 · 124d201
1 parent 8a9b3bc
commit 124d201
Showing 1 changed file with 15 additions and 10 deletions.
diff --git a/src/_radial-grid.scss b/src/_radial-grid.scss
@@ -77,25 +77,30 @@
     .z-container>.ring-#{$i}> .item.#{$size}.surface:before {
       transform: rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg));
         z-index: -1;
-        --length: calc((var(--radius-#{$i}) - #{$var} * 2));
-        --length-percent: calc(var(--angle)  * 1px);
+        position: absolute;
+        content: "";
+        --length: calc(#{$var} * 4.5);
+        /* radius * angle in rads == arc lenght*/
+        --length-percent: calc(var(--radius-#{$i}) * (var(--angle) * 3.14 / 180) * 1px);
         --color: orange;
-        --tickness: 1px;
+        --tickness: 30px;
+        width: var(--length);
         aspect-ratio: 1;
-        content: "";
-        position: absolute;
-        rotate: 45deg;
         background-color: transparent;
-        border: none;
-        border-radius: 0% 100% 0% 0% / 0% 100% 0% 0%;
-        width: var(--length);
+        //border: 6px solid white;
         border-top: var(--tickness) solid var(--color);
         border-right: var(--tickness) solid var(--color);
+        rotate: 45deg;
+        border-radius: 0% 100% 0% 0% / 0% 100% 0% 0%;
+        box-sizing: border-box;
+        //transform-origin: 0 100%;
+        /* top | left*/
         clip-path: polygon(
           calc(100% - var(--length-percent)) 0,
           100% 0,
           100% var(--length-percent),
-          0 100%
+          /* This point is key to adapt arcs to absolute center*/
+            calc(var(--length-percent) * -1) calc(var(--length-percent) + 100%)
         );
     }
     .z-container>.ring-#{$i}> .item.#{$size}.surface:hover::before {