Как правильно отразить логотип VueJS только с помощью CSS? ⇐ CSS

[Anonymous]

Я пытаюсь воспроизвести логотип VueJS, используя только CSS, а не импортируя SVG или что-то еще.
Я использую clippy, чтобы получить правильный путь к клипу , но я до сих пор не могу найти правильное вращение между плечами логотипа.

Это то, что я попробовал. далеко

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

.wrapper {
height: 100svh;
display: flex;
flex-direction: row;
align-items: center;
transform: rotate(-60deg)
}

.wrapper div {
width: 250px;
height: 45px;
}

.left {
transform: rotate(-60deg) translate(60%, 200%) scale(-1);
}

.green {
background-color: #42b883;
clip-path: polygon(33px 0, calc(100% - 33px) 0, 100% 100%, 0% 100%);
}

.blue {
background-color: #35495e;
clip-path: polygon(
66px 0,
calc(100% - 66px) 0,
calc(100% - 33px) 100%,
33px 100%
);
}

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

Я пробовал различные переводы, преобразования и т. д., но ни один из них не кажется если быть логичным, я думал, что поворота на 60 градусов будет достаточно.

Оказывается, это совсем не так.

Подробнее здесь: https://stackoverflow.com/questions/787 ... n-css-only