So I'm trying to change the shape of the twine default stat bar and I turned the progress bar into a square then rotated it to become a kite/jewel shape but now I'm left with the progress value that fills the bar and I can't seem to "mold it" into the shape I want. Idk what measurements to do it feels like I've tried it all
My code :
progress[value] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 40px;
height: 40px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
Hi Anon!
This is a job for Clip-Path!
CLIP PATH AND NON BASIC SHAPES
clip-path is an CSS rule you can use to change the visible shape of an element by "hiding" the unwanted excess. You can create simple shapes like a rhombus or very complicated ones like a cloud!
There are three basic shapes: circle, ellipse, and polygon. The path requires to set points in the element to define the border of the shape. For example:
will be coded as:
clip-path: ellipse(25% 40% at 50% 50%);
will be coded as:
clip-path: circle(50% at 50% 50%);
will be coded as:
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
The more complex the form, the longer the path will be. For very complex shapes, you'd need to use the clip-path: path(). Like this:
clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z')
But this requires SVG knowledge...
====
Here are two website who will help with most basic shapes:
Clippy
CSS clip-path Editor
====
But going back to your issue, here's what you can do:
remove the transform rules (all of them)
add this in its place:
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
AND BAM!
(I did make the width a bit longer so it is easier to see)













