Country Flags

You’re going to use the CSS properties we’ve learned about so far to recreate some country flags.

The specification for each flag is above, or you can find a PDF version here:

css-flags.pdf

You’ll find the HTML code in flags.html, and the linked stylesheet in flags.css

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Flags Example</title>
	<link rel="stylesheet" href="flags.css">
</head>
<body>
	<div class="flag" id="flag-ro"></div>

	<div class="flag" id="flag-mu">
		<div></div>
	</div>

	<div class="flag" id="flag-se">
		<span></span>
		<div></div>
		<span></span>
	</div>

	<div class="flag" id="flag-no">
		<div class="north west"></div>
		<div class="north east"></div>
		<div class="south west"></div>
		<div class="south east"></div>
	</div>

</body>
</html>

flags.html

Do not edit the HTML. Your task is to turn the provided HTML into the four flags of the countries above using pure CSS.