<div class="vue"></div>
*,
*:before,
*:after {
  box-sizing: border-box;
}
:root {
  --size: 50vmin;
}
html {
  display: grid;
  place-items: center;
  min-height: 100vh;
}
.vue {
  position: relative;
  width: var(--size);
  aspect-ratio: 15/13;
  border-style: solid;
  border-width: 0.865em 0.5em 0 0.5em;
  border-color: #41b883 transparent transparent transparent;
  font-size: var(--size);
  display: grid;
  place-items: center;
  &:before,
  &:after {
    content: "";
    position: absolute;
    border-style: solid;
    top: -0.865em;
  }
  &:before {
    border-width: 0.52em 0.3em 0 0.3em;
    border-color: #34495e transparent transparent transparent;
  }
  &:after {
    border-width: 0.2em 0.115em 0 0.115em;
    border-color: white transparent transparent transparent;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.