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

/*
Layer the two divs over each other,
and set the size of the divs.
*/
.blue, .green {
  position: absolute;
  top: 0;
  left: 0;
  width: 512px;
  height: 444px;
}

.blue {
  background-color: #34495e;
  clip-path: polygon(
    20% 0%, /* top left */
    40% 0%,
    50% 23%, /* top of the inside of the V */
    60% 0%,
    80% 0%, /* top right */
    50% 60% /* bottom of the V */
  );
}

.green {
  background-color: #41b883;
  clip-path: polygon(
    0% 0%, /* top left */
    20% 0%,
    50% 60%, /* top of the inside of the V */
    80% 0%,
    100% 0%, /* top right */
    50% 100% /* bottom of the V */
  );
}

<div class = "blue"></div>
<div class = "green"></div>

/*
If the container is smaller than a logo
(e.g. because you're using a really small screen)
make sure the right half doesn't try
to wrap under the left half.
*/
#logo {
  text-wrap: nowrap;
}

/*
Makes the mirrored right half appear to
the right of the left half, instead of under it.
*/
#logo > * {
  display: inline-block
}

/*
The left half of the logo will be put inside of this box.
Anything that hangs out will be cropped via the `overflow: hidden` rule
*/
#left-crop-container {
  width: 256px;
  height: 445px;
  overflow: hidden;
}

/*
A rotated dark-blue box with a light-green border
under it. This is getting cropped by its #left-crop-container parent.
*/
#left-content {
  position: relative;
  background-color: #34495e;
  width: 550px;
  height: 82px;
  left: -72px;
  top: 96px;
  border-bottom: 89px solid #41b883;
  transform: rotate(60deg);
}

/* Mirrors its content, and shifts it slightly */
#mirror-contents-to-right {
  position: relative;
  transform: rotateY(180deg);
  left: -5px;
}

<div id = "logo">
  <div id = "left-crop-container">
    <div id = "left-content"></div>
  </div>
  <div id = "mirror-contents-to-right">
    <div id = "left-crop-container">
      <div id = "left-content"></div>
    </div>
  </div>
</div>

.vue {
    width: 500px;
    height: 500px;
    background-image: linear-gradient(60deg, transparent 54%, #00BD82 54%, #00BD82 70%, #3E5468 70%, #3E5468 85%, transparent 85%), linear-gradient(-60deg, transparent 54%, #00BD82 54%, #00BD82 70%, #3E5468 70%, #3E5468 85%, transparent 85%);
    background-size: 50% 100%, 50% 100%;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
    transform: scale(0.5);

}

<div class = "vue"></div>

.vue {
    width: 140px;
    height: 140px;
    border: solid #00BD82;
    border-width: 0px 30px 30px 0px;
    box-shadow: inset -30px -30px #3E5468;
    transform: rotate(45deg) skew(15deg, 15deg);
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

<div class = "vue"></div>

.logo {
  width: min(230px, 100%);
  aspect-ratio: 1.154;
  position: relative;
  &:before,
  &:after {
    content: '';
    position: absolute;
  }
  &:before {
    inset: 0 20% 40%;
    background-color: #34495e;
    clip-path: polygon(0 0, 30% 0, 50% 40%, 70% 0, 100% 0, 50% 100%);
  }
  &:after {
    inset: 0;
    background-color: #41b883;
    clip-path: polygon(0 0, 20% 0, 50% 60%, 80% 0, 100% 0, 50% 100%);
  }
}

/* Just for example */

body {
  display: flex;
  gap: 2px;
  margin: 0;
}

.logo-svg {
  width: min(230px, 100%);
  aspect-ratio: 1.154;
  display: flex;
  svg {
    width: 100%;
    height: 100%;
  }
}

<div class = "logo"></div>
<div class = "logo-svg">
  <svg xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0 0 261.76 226.69"><g transform = "matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform = "translate(178.06 235.01)"><path d = "m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill = "#41b883"/></g><g transform = "translate(178.06 235.01)"><path d = "m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill = "#34495e"/></g></g></svg>
</div>

.vue {
  width: 200px; /* control the size */
  aspect-ratio: 1.18;
  background: conic-gradient(from -30deg at 50% 60%, #34495e 60deg, #41b783 0);
  clip-path: polygon(0 0, 39% 0, 50% 23%, 61% 0, 100% 0, 50% 100%);
}

<div class = "vue"></div>