<div class="triangle-1"></div>

<div class="triangle-2"></div>

<div class="triangle-3"></div>

<div class="triangle-4"></div>

/**
 * A triangle with (or without) rounded corners
 * @param: $size - width/height of the triangle. Default: 2rem
 * @param: $background - any valid CSS background declaration. Default: red
 * @param: $radius - true or false (if false, no radius). Default: true
 */
@mixin triangle($size: 2rem, $background: red, $radius: true) {
  &,
  &::before,
  &::after {
    width: $size;
    height: $size;
  }

  position: relative;
  overflow: hidden;
  transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(0.866);
  pointer-events: none;

  &::before,
  &::after {
    content: '';
    position: absolute;
    background: $background;
    pointer-events: auto;
  }

  &::before {
    // prettier-ignore
    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(0.866) translateX(-24%);
  }

  &::after {
    // prettier-ignore
    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(0.866) translateX(24%);
  }

  @if ($radius) {
    border-radius: 20%;

    &::before {
      border-radius: 20% 20% 20% 55%;
    }

    &::after {
      border-radius: 20% 20% 55% 20%;
    }
  }
}

/**
 * Usage:
 */
.triangle {
  &-1 {
    // prettier-ignore
    @include triangle(20rem, linear-gradient(to bottom, red 0%, blue 100%), true);
  }

  &-2 {
    @include triangle(10rem, black, false);
  }

  &-3 {
    @include triangle(15rem, gray, true);
  }

  &-4 {
    // prettier-ignore
    @include triangle(17.5rem, linear-gradient(to right, orange 0%, red 100%), false);
  }
}

// Pen styling
body {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;

  > div {
    margin: 1rem;
  }
}