Fix the flag of China stars rotating issue #11

[tao-guo]

1. Create helper function to link polygen points.
2. Draw five angle stars with polygen() for css clip-path.

[pixelastic]

Whoo, thanks.

1. Could you explain the trick to combine several shapes into one polygon declaration? I have trouble following what the SCSS code is doing here.

2. Your way of drawing the star is way more elegant than mine. Thanks.

[tao-guo]

Thanks for reviewing. Basically you need to make sure each polygon is a loop, and you go from one loop to another and will eventually come back. The first loop point and last loop point can be skipped.

I just got the inspiration from this link: https://css-tricks.com/cutting-inner-part-element-using-clip-path/

[tao-guo]

    clip-path: polygon(
      0 50%, 40% 0, 40% 100%, 0 50%,
      100% 50%, 60% 0, 60% 100%, 100% 50%
      );

    clip-path: polygon(
      0 0, 40% 0, 0 40%, 0 0,
      100% 0, 100% 40%, 60% 0, 100% 0,
      100% 100%, 60% 100%, 100% 60%, 100% 100%,
      0 100%, 0 60%, 40% 100%, 0 100%,
      100% 100%, 100% 0
      );

[pixelastic]

I'm in the process of merging it. Just want to understand how it works first so I can re-use it on other flags.

How did you get the angle values? Did you calculate them by hand or do you have construction cheet somewhere?

[tao-guo]

Yes, I calculated myself based on the spec on wikipedia:

tguo@ln-tguo:/tmp/mozilla_tguo0$ node
> Math.atan(3/5)/Math.PI*180+90
120.96375653207352