improve arc

zumerlab · Apr 17, 2023 · d11a401 · d11a401
1 parent 96210f0
commit d11a401
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/src/_core-elements.scss b/src/_core-elements.scss
@@ -89,17 +89,17 @@ div[class^="ring-"] {
     content: '';
     position: absolute;
     // calc with of element or distnace of element nis it raidus
-    width: 150px;
-    height: 300px;
+    width: 50px;
+    height: 120px;
     border: 1px solid black;
-    // 1/2 width - last rings r
+    // 1/2 width - last rings 
     opacity: .6;
    // radial gradient
-    background-image: radial-gradient(circle at 0px 50%, orange 0px 5px, transparent 5px 50px, orange 51px 90px, transparent 91px 100%);
+    background-image: radial-gradient(circle at -40px 50%, orange 0px 5px, transparent 5px 50px, orange 51px 90px, transparent 91px 100%);
     // bordarc
-    border-radius: 0% 100% 100% 0% / 0% 50% 50% 0%;
+    // border-radius: 0% 100% 100% 0% / 0% 50% 50% 0%;
     // polygon
-    clip-path: polygon(100% 0, 0 50%, 100% 100%);
+    clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
 }
 .surface:hover::before {
     background-image: radial-gradient(circle at 0px 50%, orange 0px 5px, transparent 5px 50px, purple 51px 90px, transparent 91px 100%);

diff --git a/src/_radial-grid.scss b/src/_radial-grid.scss
@@ -75,7 +75,9 @@
       transform: rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg)) translate(calc(var(--radius-#{$i})), 0) rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * -1deg));
     }
     .z-container>.ring-#{$i}> .item.#{$size}.surface:before {
-      transform: rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg)) translate(calc(var(--radius-#{$i}) - var(--radius-#{$i - $resta}) - #{$var}), 0);
+      transform: rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg)) ;
+      width: calc(var(--radius-#{$i}) - var(--radius-#{$i - $resta}) + 40px);
+      height: calc(#{$var} + 20px);
     }
 
     .z-container>.ring-#{$i}> .item.stationary.#{$size} {