# pixelastic/css-flags

Switch branches/tags
Nothing to show
Fetching contributors…
Cannot retrieve contributors at this time
86 lines (79 sloc) 2.89 KB
 // Brazil // http://www.crwflags.com/fotw/flags/br.html // https://upload.wikimedia.org/wikipedia/commons/b/be/Flag_of_Brazil_%28dimensions%29.svg @mixin flag-bra() { @include ratio(7 / 10); \$unit: \$w2000; \$green: #009639; \$yellow: #FFE000; \$blue: #012169; \$white: #FFFFFF; \$diamond-distance: 170 * \$unit; // We'll do 4 green stripes to draw the inner yellow diamond // To know their angle and distance, we'll get the dimensions of the imaginary // triangle that we would get if we continue one of the diamond sides up to // one of the flag sides. // First, we need to get the left inside angle of the diamond \$diamond-height: \$height - 2 * \$diamond-distance; \$diamond-width: \$width - 2 * \$diamond-distance; \$half-diamond-height: \$diamond-height / 2; \$half-diamond-width: \$diamond-width / 2; \$diamond-angle: atan(\$half-diamond-height / \$half-diamond-width) * 1deg; // By symmetry and because we only have right-angled triangles, the diamond // angle is the angle of the stripe \$alpha: \$diamond-angle; // We get the padding of the imaginary triangle \$padding-triangle: tan(\$alpha) * \$diamond-distance; // We now get the hypotenuse \$hypotenuse: \$height / 2 + \$padding-triangle; // Finally, we can get the stripe distance \$stripe-size: cos(\$alpha) * \$hypotenuse; background-color: \$yellow; background-image: stripe(180 - \$alpha, \$green, \$stripe-size, 0), stripe(180 + \$alpha, \$green, \$stripe-size, 0), stripe(-\$alpha, \$green, \$stripe-size, 0), stripe(\$alpha, \$green, \$stripe-size, 0) ; // We use a classical border-radius: 50% for the circle, but with a radial // background to make the "Order e progresso" banner. Its center will be out // of the element. \$circle-width: 700 * \$unit; \$oep-x: (\$circle-width / 2) - (200 * \$unit); \$oep-y: (\$circle-width / 2) + (700 * \$unit); \$oep-distance: 800 * \$unit; \$oep-height: 50 * \$unit; &:before { content: ''; display: block; position: absolute; width: \$circle-width; height: \$circle-width; border-radius: 50%; top: (\$height - \$circle-width) / 2; left: (\$width - \$circle-width) / 2; background-color: \$blue; background-image: circle(\$blue, \$oep-distance * 2, \$oep-x, \$oep-y), circle(\$white, (\$oep-distance + \$oep-height) * 2, \$oep-x, \$oep-y); } // TODO: Field of stars // &:after { // content: ''; // display: block; // position: absolute; // top: 0; // left: 0; // bottom: 0; // right: 0; // background: red; // // width: \$circle-width; // // height: \$circle-width; // // border-radius: 50%; // // top: (\$height - \$circle-width) / 2; // // left: (\$width - \$circle-width) / 2; // // background-color: \$white; // clip-path: polygon(five-pointed-star(\$circle-width, 100px, 100px)); // } }; //