// unit
.triangle {
  position: relative;
  display: block;
  width: 0;
  height: 0;
  border-bottom: calc(var(--tail-size, 24px) * var(--tail-skew, 1.5)) solid var(--tail-color, #000);
  border-left: var(--tail-size, 24px) solid transparent;
  border-right: var(--tail-size, 24px) solid transparent;
  transform: rotateZ(var(--tail-angle, 0deg));
  transform-origin: 50% 50%;
  pointer-events: none;
  transition: transform 1000ms ease-out;
}

// example - basic
.triangle--basic {
  --tail-size: 32px;
  --tail-color: hsl(120 50% 50%);
  --tail-skew: 1.2;
  --tail-angle: 90deg;
}

// example - tail
.triangle--tail {
  position: relative;
  --tail-size: 32px;
  --tail-skew: 1.1;
  --tail-angle: -90deg;
  &:before,
  &:after {
    content: '';
    position: absolute;
    @extend .triangle;
  }
  &:before {
    --tail-color: hsl(0 0% 0%);
    left: -2px;
  }
  &:after {
    --tail-color: hsl(0 0% 100%);
  }
}


// etc

body {
  margin: 0;
}
.main {
  display: grid;
  place-content: center;
  gap: 32px;
  height: 100vh;
  max-height: 100vh;
}