Flag Header (CSS)

header {
    position: relative;
    top: 0;
    left: 0;

    font-size: 64px;
    height: 1em;
    background-color: var(--yellow);

    --yellow: #FFD700;
    --purple: #950DC2;

    --crescent-size: 0.6666666666em;
    --crescent-void-size: 0.6em;

    --crescent-position: calc(50% - (var(--crescent-size) / 2));
}

header span {
    position: absolute;
    display: block;
}

header .ellipse {
    border-radius: 100%;
}

header .crescent {
    background-color: black;
    width: var(--crescent-size);
    height: var(--crescent-size);
    left: var(--crescent-position);
    bottom: var(--crescent-position);
    z-index: 1;

    transform: rotate(-45deg);
}

header .crescent-void {
    background-color: var(--yellow);
    width: var(--crescent-void-size);
    height: var(--crescent-void-size);
    left: 0.2em;
    bottom: calc(50% - var(--crescent-void-size) / 2);
    z-index: 2;
}

header .stripe {
    background-color: var(--purple);
    width: 100%;
    height: 0.1em;
    left: 0;
    z-index: 3;
}

header .stripe.top {
    top: 0;
}

header .stripe.bottom {
    bottom: 0;
}