Creating a Palestinian flag using CSS
Live here: https://tord.codeberg.page/palestine-flag/
Repo: https://codeberg.org/tord/palestine-flag
Html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Palestinian Flag 🇵🇸</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="black-rectangle"></div>
<div class="white-rectangle"></div>
<div class="green-rectangle"></div>
<div class="red-triangle"></div>
</div>
</body>
</html>
CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--rectangle-size: 25vh;
--triangle-border-size: calc(0.5*3*var(--rectangle-size));
--flag-width: calc(var(--rectangle-size)*3*1.5);
}
body {
background-color: #f0f0f0;
}
.container {
position: relative;
width: var(--flag-width);
margin-left: auto;
margin-right: auto;
}
.black-rectangle,
.white-rectangle,
.green-rectangle {
height: var(--rectangle-size);
}
.black-rectangle {
background-color: #000000;
}
.white-rectangle {
background-color: #ffffff;
}
.green-rectangle {
background-color: #009736;
}
.red-triangle {
/*
No content, only border. The border is transparent in all directions except
to the left. This leaves us with the rectangle we want.
In addition to the border, please note the positioning of this and the parent
element.
*/
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-left: var(--triangle-border-size) solid #ee2a35;
border-right: var(--triangle-border-size) solid transparent;
border-top: var(--triangle-border-size) solid transparent;
border-bottom: var(--triangle-border-size) solid transparent;
}