# pixelastic/css-flags

Fetching contributors…
Cannot retrieve contributors at this time
149 lines (129 sloc) 4.33 KB
 // Nepal // http://www.crwflags.com/fotw/flags/np.html // http://www.vexilla-mundi.com/nepal_flag.html // http://crwflags.com/fotw/flags/np%27.html // This one is one of the hardest of the lot. The peculiar shape is done // through clip-path. We first cut the blue shape in the main div, then we cut // the red one in an :after. The two symbols are positionned through :before // and :first-letter. Symbols are simply displayed on the first line each one // is then placed at the correct position using text-shadow. // A lot of geometry is involved, don't hesitate to draw it on a sheet of // paper. @mixin flag-npl() { @include ratio(2 / 3); \$unit: \$h800; \$red: #c8102e; \$blue: #0c2340; \$white: #FFFFFF; // We'll name points from A to E, starting on the top and rotating clockwise \$DE: 600 * \$unit; \$CD: 600 * \$unit; \$AE: 800 * \$unit; \$A-x: 0; \$A-y: 0; \$D-x: \$DE; \$D-y: \$AE; \$E-x: 0; \$E-y: \$AE; // To get the two missing points, we'll need to calculate the width of the // inner triangle formed by (DC), (AE) and the perpendicular of (AE) coming // through B. // Let's consider K the intersection of (DC) with (AE) \$EK: 600 * \$unit; \$AK: 200 * \$unit; \$DK: hypotenuse(\$EK, \$DE); \$CK: \$DK - \$CD; // Let's consider J the intersection of (CB) with (AE) \$alpha-DKE: asin(\$DE / \$DK); \$alpha-CKJ: \$alpha-DKE; \$JK: cos(\$alpha-CKJ) * \$CK; \$CJ: sin(\$alpha-CKJ) * \$CK; \$AJ: \$AK + \$JK; \$B-x: \$DE; \$B-y: \$AJ; \$C-x: \$CJ; \$C-y: \$AJ; background: \$blue; clip-path: polygon( \$A-x \$A-y, \$B-x \$B-y, \$C-x \$C-y, \$D-x \$D-y, \$E-x \$E-y ); // We need to add the blue border around the flag. The border size is // consistent, but we need to re-calculate all the coordinates. \$border-width: 25 * \$unit; \$BJ: \$DE; \$AB: hypotenuse(\$AJ, \$BJ); \$alpha-JAB: asin(\$BJ / \$AB); \$alpha-JAB-prime: \$alpha-JAB / 2; \$A-x-offset: - \$border-width; \$A-y-offset: - \$border-width / tan(\$alpha-JAB-prime); \$alpha-ABJ: 90deg - \$alpha-JAB; \$alpha-ABJ-prime: \$alpha-ABJ / 2; \$B-x-offset: \$border-width / tan(\$alpha-ABJ-prime); \$B-y-offset: \$border-width; \$alpha-JCK: 90deg - \$alpha-CKJ; \$alpha-BCD: \$alpha-JCK; \$alpha-BCD-prime: \$alpha-BCD / 2; \$C-x-offset: \$border-width / tan(\$alpha-BCD-prime); \$C-y-offset: \$border-width; \$alpha-CDE: 90deg - \$alpha-CKJ; \$alpha-CDE-prime: \$alpha-CDE / 2; \$D-x-offset: \$border-width / tan(\$alpha-CDE-prime); \$D-y-offset: \$border-width; \$E-x-offset: - \$border-width; \$E-y-offset: \$border-width; &:after { content: ''; z-index: 5; position: absolute; top: 0; left: 0; width: \$width; height: \$height; background-color: \$red; clip-path: polygon( (\$A-x - \$A-x-offset) (\$A-y - \$A-y-offset), (\$B-x - \$B-x-offset) (\$B-y - \$B-y-offset), (\$C-x - \$C-x-offset) (\$C-y - \$C-y-offset), (\$D-x - \$D-x-offset) (\$D-y - \$D-y-offset), (\$E-x - \$E-x-offset) (\$E-y - \$E-y-offset) ); } // Let's roughly calculate the scale difference between the red and blue // shapes and apply it to everything we calculated here. \$red-rectangle-area: \$AE * \$DE; \$blue-rectangle-area: (\$AE + 2 * \$border-width) * (\$DE + 2 * \$border-width); \$blue-red-ratio: \$red-rectangle-area / \$blue-rectangle-area; \$star-width: 256 * \$unit * \$blue-red-ratio; \$star-height: \$star-width; \$crescent-width: 240 * \$unit * \$blue-red-ratio; \$crescent-height: 80 * \$unit * \$blue-red-ratio; \$crescent-left: \$border-width + 150 * \$unit * \$blue-red-ratio - \$crescent-width / 2; \$crescent-top: - \$star-height / 2 + 240 * \$unit; // Let's consider M the center of [CD] and L the point where the // perpendicular to (DE) goes through M \$DM: \$CD / 2; \$LM: sin(\$alpha-CDE) * \$DM; \$star-top: - \$star-height / 2 + (\$height - \$LM) + \$border-width; \$star-left: - \$crescent-width + \$crescent-left; &:before { content: \$UTF8_NPL_CRESCENT+\$UTF8_NPL_STAR; position: relative; // needed for first-letter and z-index to work z-index: 10; color: transparent; font-family: Symbols; font-size: \$star-width; line-height: \$star-width; text-shadow: \$star-left \$star-top 0 \$white; } &:first-letter { font-family: Symbols; color: transparent; line-height: \$star-width; // Use a line-height equal to the biggest of the two font-size: \$crescent-width; text-shadow: \$crescent-left \$crescent-top 0 \$white; } };