Как воссоздать флаг Эфиопии с помощью HTML и CSS ⇐ Html

[Anonymous]

Я пытаюсь воссоздать флаг Этопии с помощью HTML и CSS, но не могу создать среднюю часть флага. Звезда внутри круга приближается не так, как ожидалось. HTML и CSS, которые я применил:

Код: Выделить всё

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}

.flag {
width: 450px;
height: 300px;
position: relative;
/* Green, Yellow, Red stripes using linear gradient */
background: linear-gradient(
to bottom,
#078900 0%,     /* Green */
#078900 33.33%,
#fddc12 33.33%,   /* Yellow */
#fddc12 66.66%,
#e4032d 66.66%,   /* Red */
#e4032d 100%
);
border: 1px solid #333;
}

.emblem {
/* Position and size of the emblem container */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40%;
height: 40%;
}

/* Ensures the SVG scales correctly within the .emblem container */
.emblem svg {
width: 100%;
height: 100%;
display: block;
}

Код: Выделить всё

Accurate Ethiopian Flag

Мой результат:


Ожидаемый результат:



Подробнее здесь: https://stackoverflow.com/questions/798 ... ml-and-css