#009736

tord_dellsen@diasp.eu

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 &#x1f1f5&#x1f1f8</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;
}

#CSS #Palestine