Greek Flag in CSS (responsive)

Μέσω το css property –unit: 25px; μπορούμε, αλλάζοντας τα pixels, να αυξομειώσουμε το μέγεθος την σημαίας.

HTML

<div class="greek_flag">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

CSS

:root {
    --unit: 25px;
    --gr-blue: #0039a7;
}

.greek_flag span {
    display: block;
    height: calc(var(--unit) * 2);
    width: calc(var(--unit) * 27);
}

.greek_flag span:nth-child(odd) {
    background-color: var(--gr-blue);
}
.greek_flag span:nth-child(even) {
    background-color: white;
}

.greek_flag::before {
    content: "";
    position: absolute;
    display: block;
    width: calc(var(--unit) * 10);
    height: calc(var(--unit) * 10);
    background-color: var(--gr-blue);
    background-image: linear-gradient(
            90deg,
            transparent 0px,
            transparent calc(var(--unit) * 4),
            white calc(var(--unit) * 4),
            white calc(var(--unit) * 6),
            transparent calc(var(--unit) * 6),
            transparent calc(var(--unit) * 10)
        ),
        linear-gradient(
            180deg,
            transparent 0px,
            transparent calc(var(--unit) * 4),
            white calc(var(--unit) * 4),
            white calc(var(--unit) * 6),
            transparent calc(var(--unit) * 6),
            transparent calc(var(--unit) * 10)
        );
}