Responsive Flags

Exercise: Responsive Flags

In the Country Flags exercise, we used CSS to recreate several geometric designs of national flags, based on a fixed pixel size.

In this exercise, we’re going to recreate some more flag designs, but we’re going to make them responsive:

When the browser window is the same shape as the original flag design, your layout should fill the browser window with a design that replicates the original flag.
When the browser window is resized, your design should adapt gracefully to the new size/shape in a way that preserves the most distinctive characteristics of the original flag.

The exact nature of the responsiveness in your design is up to you. Here’s an example based on the flag of Bahamas:

	* { box-sizing: border-box; margin: 0; padding: 0; }
	body {
		width: 100vw;
		height: 100vh;
		background: linear-gradient(#00778b 33%, #ffc72c 33% 67%, #00778b 67%);
		&::after {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			content: ' ';
			border-width: 50vh;
			border-style: solid;
			border-color: transparent;
			border-left-color: black;
	}

flag-of-bahamas.html

Use backgrounds, gradients, transforms, border tricks - all the techniques we’ve talked about in the course so far. You can add elements if you need to, but see if you can do it purely by styling the <body> element.

Every flag in this section should be reproducible using only the CSS techniques we’ve covered so far: no polygons, shapes, clipping paths. And you shouldn’t need to resort to background images.

(And no, you can’t use flag emoji; that won’t work on Windows, and cross-platform support is a requirement! 😉)