Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="hair-1"></div>
<div class="hair-2"></div>
<div class="hair-3"></div>
<div class="hair-4"></div>

<div class="ear-left"></div>
<div class="ear-right-1"></div>
<div class="ear-right-2"></div>

<div class="face-1"></div>
<div class="face-2"></div>
<div class="face-3"></div>
<div class="face-4"></div>
<div class="face-5"></div>

<div class="nose-1"></div>
<div class="nose-2"></div>

<div class="eyewear-center"></div>

<div class="eyewear">
	<div class="eyewear-1"></div>
	<div class="eyewear-2"></div>
</div>

<div class="eyewear eyewear-right">
	<div class="eyewear-1"></div>
	<div class="eyewear-2"></div>
</div>

<div class="eye-left-1"></div>
<div class="eye-left-2"></div>
<div class="eye-left-3"></div>

<div class="eye-right-1"></div>
<div class="eye-right-2"></div>
<div class="eye-right-3"></div>

<div class="mouth"></div>

<div class="neck-1"></div>
<div class="neck-2"></div>

<div class="shirt-1"></div>
<div class="shirt-2"></div>
<div class="shirt-3"></div>
<div class="shirt-4"></div>
<div class="shirt-5"></div>
<div class="shirt-6"></div>
<div class="shirt-7"></div>
<div class="shirt-8"></div>
<div class="shirt-9"></div>
              
            
!

CSS

              
                // colors
$bg-color: #555555;
$black-color: #2d2d2d;
$skin-color: #c4ac86;
$skin-dark-color: #997f61;
$shirt-color: #bf4e7f;
$shirt-dark-color: #992d60;
$eye-white-color: #ffffff;

html,
body {
  width: 100%;
  height: 100%;
  background: $bg-color;
  overflow: hidden;

  * {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    box-sizing: border-box;

    &:before,
    &:after {
      content: "";
      position: absolute;
    }
  }
}

.hair {
  &-1 {
    width: 24vmin;
    height: 20vmin;
    background: $black-color;
    top: -62.8vmin;
    left: -18.2vmin;
    transform: rotate(-10deg) skewX(-10deg);
    border-radius: 60% 44% 0 5vmin;

    &::before {
      width: 10vmin;
      height: 10vmin;
      background: $black-color;
      top: -1.7vmin;
      left: 14vmin;
      transform: skewX(45deg) rotate(-40deg);
      border-radius: 0 10vmin 0 0;
    }

    &::after {
      width: 20.8vmin;
      height: 20vmin;
      background: $black-color;
      top: 4vmin;
      left: 22.5vmin;
      transform: skewX(10deg) rotate(10deg);
      border-radius: 3.5vmin 15vmin 0 0;
    }
  }

  &-2 {
    z-index: 3;
    width: 30vmin;
    height: 38vmin;
    background: $black-color;
    top: -21vmin;
    left: -7.5vmin;
    transform: rotate(-8.5deg);
    border-radius: 4vmin 0 0 0;

    &::before {
      width: 30vmin;
      height: 40vmin;
      background: $black-color;
      top: 9vmin;
      left: 15vmin;
      transform: rotate(8.5deg);
    }

    &::after {
      width: 10vmin;
      height: 15vmin;
      background: $bg-color;
      top: 9vmin;
      left: 41.4vmin;
      transform: rotate(8.5deg);
    }
  }

  &-3 {
    z-index: 3;
    width: 15vmin;
    height: 20vmin;
    background: $bg-color;
    top: -14vmin;
    left: 56vmin;
    transform: rotate(10deg);
    border-radius: 0 0 0 4vmin;

    &::before {
      width: 30vmin;
      height: 30vmin;
      background: $bg-color;
      top: 10vmin;
      left: -4.3vmin;
      transform: rotate(20deg);
      border-radius: 0 0 0 100%;
    }

    &::after {
      width: 5vmin;
      height: 5vmin;
      background: $bg-color;
      left: -0.1vmin;
      transform: rotate(-5deg);
    }
  }

  &-4 {
    z-index: 1;
    width: 30vmin;
    height: 30vmin;
    background: $black-color;
    top: 4vmin;
    left: -11.5vmin;
    transform: rotate(3deg);
  }
}

.ear-left {
  z-index: 2;
  width: 4vmin;
  height: 8vmin;
  background: $skin-color;
  top: -30vmin;
  left: -38vmin;
  transform: rotate(-10deg);
  border-radius: 100% 0 0 80%;
}

.ear-right {
  &-1 {
    z-index: 3;
    width: 4vmin;
    height: 13vmin;
    background: $skin-dark-color;
    top: -32.35vmin;
    left: 30vmin;
    border-radius: 0 100% 0 0;

    &::before {
      width: 3vmin;
      height: 10vmin;
      background: $black-color;
      top: 5vmin;
      left: 3.6vmin;
    }

    &::after {
      width: 3vmin;
      height: 3vmin;
      background: $black-color;
      top: 12vmin;
      left: 2.8vmin;
      transform: rotate(35deg);
    }
  }

  &-2 {
    z-index: 3;
    width: 3vmin;
    height: 3vmin;
    background: $skin-dark-color;
    top: -21.5vmin;
    left: 27vmin;
    transform: rotate(-20deg);

    &::before {
      width: 3vmin;
      height: 3vmin;
      background: $black-color;
      top: 3.2vmin;
      left: 2vmin;
    }
  }
}

.face {
  &-1 {
    z-index: 4;
    width: 10vmin;
    height: 26vmin;
    background: $skin-color;
    top: -25vmin;
    left: -22vmin;
    transform: rotate(-3deg);
    border-radius: 90% 10% 70% 30% / 50% 100% 0% 50%;

    &::before {
      width: 10vmin;
      height: 10vmin;
      background: $skin-color;
      top: 17.3vmin;
      left: 3vmin;
      transform: rotate(12deg);
      border-radius: 0 0 2vmin 1vmin;
    }

    &::after {
      width: 10vmin;
      height: 10vmin;
      background: $skin-color;
      top: 18.4vmin;
      left: 9vmin;
      transform: rotate(9deg);
      border-radius: 0 0 1vmin 1vmin;
    }
  }

  &-2 {
    z-index: 4;
    width: 9.4vmin;
    height: 10vmin;
    background: $skin-color;
    top: -5vmin;
    left: 12.5vmin;
    transform: rotate(-4.3deg);
    border-radius: 0 0 1.8vmin 0.3vmin;

    &::before {
      width: 10vmin;
      height: 12vmin;
      background: $skin-color;
      top: -4vmin;
      left: 1.5vmin;
      transform: rotate(20deg);
      border-radius: 0 1.2vmin 1vmin 0;
    }

    &::after {
      width: 10vmin;
      height: 12.4vmin;
      background: $skin-color;
      top: -14.3vmin;
      left: 4.2vmin;
      transform: rotate(11deg);
      border-radius: 0 1.5vmin 0 0;
    }
  }

  &-3 {
    z-index: 4;
    width: 18vmin;
    height: 23vmin;
    background: $skin-color;
    top: -29vmin;

    &::before {
      width: 7vmin;
      height: 7vmin;
      background: $skin-color;
      top: -2.7vmin;
      left: -3.3vmin;
      transform: skewX(-25deg) rotate(-2deg);
      border-radius: 100% 0 0 0;
    }

    &::after {
      width: 6vmin;
      height: 7vmin;
      background: $skin-color;
      top: -2.3vmin;
      left: 15.4vmin;
      transform: skewX(56deg) rotate(50deg);
      border-radius: 0 100% 0 0;
      box-shadow: -1vmin 2vmin 0 0.1vmin $skin-color;
    }
  }

  &-4 {
    z-index: 4;
    width: 11vmin;
    height: 6vmin;
    background: $skin-color;
    top: -53vmin;
    left: -1vmin;
    transform: rotate(-12deg);
    border-radius: 1vmin 0 0 0;

    &::before {
      width: 3vmin;
      height: 11vmin;
      background: $skin-color;
      top: -1.7vmin;
      left: 10.6vmin;
      transform: rotate(-39deg);
    }
  }

  &-5 {
    z-index: 4;
    width: 12vmin;
    height: 5.6vmin;
    background: $skin-color;
    top: -62.9vmin;
    left: 3vmin;

    &::before {
      width: 10vmin;
      height: 10vmin;
      background: $black-color;
      top: -3.1vmin;
      left: -3.2vmin;
      transform: rotate(8deg) skewX(-18deg);
      border-radius: 0 0 100% 0;
    }

    &::after {
      width: 10vmin;
      height: 10vmin;
      background: $black-color;
      top: -2.6vmin;
      left: 6.8vmin;
      transform: skewX(10deg) rotate(12deg);
      border-radius: 0 0 0 100%;
    }
  }
}

.nose {
  &-1 {
    z-index: 6;
    width: 6vmin;
    height: 29vmin;
    top: -42vmin;
    left: 10.1vmin;
    border: 0.2vmin solid $black-color;
    border-right: 0;
    border-bottom: 0;
    border-radius: 32% 68% 40% 60% / 46% 45% 55% 54%;

    &::before {
      width: 7vmin;
      height: 2.7vmin;
      background: $skin-color;
      top: 26.5vmin;
      transform: rotate(10deg);
    }
  }

  &-2 {
    z-index: 4;
    width: 7.6vmin;
    height: 5vmin;
    top: -15.3vmin;
    left: 3vmin;
    transform: rotate(1deg);
    border: 0.2vmin solid $black-color;
    border-left: 0;
    border-bottom: 0;
    border-radius: 0% 100% 0% 100% / 100% 70% 70% 0%;

    &::before {
      width: 2vmin;
      height: 2vmin;
      background: $skin-color;
      left: 5.9vmin;
      transform: rotate(10deg);
      box-shadow: 2vmin 3.5vmin 0 0.1vmin $skin-color,
        -7vmin 1.75vmin 0 0.5vmin $skin-color;
    }
  }
}

.eyewear-center {
  z-index: 5;
  width: 5.4vmin;
  height: 4.8vmin;
  top: -35.3vmin;
  left: 2vmin;
  border: 0.5vmin solid $black-color;
  border-bottom: 0;
  border-radius: 50%;
  transform: rotate(-10deg);

  &::before {
    width: 4vmin;
    height: 6vmin;
    background: $skin-color;
    top: 0.5vmin;
    left: 2.7vmin;
    transform: rotate(35deg);
  }

  &::after {
    width: 4vmin;
    height: 6vmin;
    background: $skin-color;
    top: -0.5vmin;
    left: -1.7vmin;
    transform: rotate(-35deg);
  }
}

.eyewear {
  &-1 {
    z-index: 4;
    width: 15vmin;
    height: 12vmin;
    top: -32.8vmin;
    left: -13.2vmin;
    transform: rotate(-8deg);
    border: 0.5vmin solid $black-color;
    border-radius: 0 50% 0 44%;

    &::before {
      width: 14.4vmin;
      height: 2.4vmin;
      background: $skin-color;
      top: 9.5vmin;
      left: 0.5vmin;
    }

    &::after {
      width: 2vmin;
      height: 9vmin;
      background: $skin-color;
      top: 2vmin;
      left: 13.2vmin;
      transform: rotate(8deg);
    }
  }

  &-2 {
    z-index: 5;
    width: 13vmin;
    height: 9.6vmin;
    top: -31vmin;
    left: -15.4vmin;
    transform: skewX(-15deg);
    border: 0.5vmin solid $black-color;
    border-top: 0;
    border-left: 0;
    border-radius: 0 1.1vmin 35% 6.5vmin;
  }

  &-right {
    z-index: 5;
    left: 4.5vmin;
    transform: scaleX(-1);

    .eyewear-1 {
      border-bottom-left-radius: 45%;

      &::before {
        left: 2vmin;
      }

      &::after {
        top: 3.5vmin;
        left: 13.4vmin;
        border-top-left-radius: 1vmin;
        border-top-right-radius: 1vmin;
        transform: rotate(-5deg);
      }
    }
  }
}

.eye-left {
  &-1 {
    z-index: 5;
    width: 7.5vmin;
    height: 2vmin;
    top: -34.9vmin;
    left: -14.3vmin;
    transform: rotate(-9deg);
    border: 0.2vmin solid $black-color;
    border-top: 0;
    border-right: 0;
    border-radius: 0 0 0 50%;

    &::before {
      width: 1vmin;
      height: 1.4vmin;
      background: $skin-color;
      top: -0.3vmin;
      left: -0.7vmin;
      transform: rotate(-10deg);
    }

    &::after {
      width: 0.2vmin;
      height: 1.2vmin;
      background: $black-color;
      top: 1.8vmin;
      left: 6.9vmin;
      transform: rotate(25deg);
    }
  }

  &-2 {
    z-index: 4;
    width: 4.4vmin;
    height: 3.5vmin;
    background: $black-color;
    top: -36.5vmin;
    left: -14.9vmin;
    border-radius: 1vmin 1vmin 1.6vmin 2.2vmin;

    &::before {
      width: 0.7vmin;
      height: 0.7vmin;
      background: $eye-white-color;
      top: 1vmin;
      left: 2.5vmin;
      border-radius: 50%;
    }
  }

  &-3 {
    z-index: 4;
    width: 5vmin;
    height: 2vmin;
    background: $skin-color;
    top: -40.7vmin;
    left: -18.2vmin;
    transform: rotate(-9deg);
    border-bottom: 0.2vmin solid $black-color;

    &::before {
      width: 3.3vmin;
      height: 1vmin;
      background: $skin-color;
      top: 1.1vmin;
      left: 5vmin;
      transform: rotate(10deg);
      border-bottom: 0.2vmin solid $black-color;
    }

    &::after {
      width: 0.2vmin;
      height: 0.8vmin;
      background: $black-color;
      top: 1.7vmin;
      left: 7.9vmin;
      transform: rotate(-20deg);
    }
  }
}

.eye-right {
  &-1 {
    z-index: 5;
    width: 7.6vmin;
    height: 3vmin;
    background: $skin-color;
    top: -35vmin;
    left: 18.2vmin;
    border: 0.2vmin solid $black-color;
    border-top: 0;
    border-radius: 50% 50% 50% 50% / 65% 50% 50% 35%;

    &::before {
      width: 4.5vmin;
      height: 1.5vmin;
      background: $skin-color;
      top: 0.1vmin;
      left: 3.3vmin;
      transform: rotate(15deg);
    }

    &::after {
      width: 4.5vmin;
      height: 1.5vmin;
      background: $skin-color;
      top: 0.4vmin;
      left: -1vmin;
      transform: rotate(-15deg);
    }
  }

  &-2 {
    z-index: 5;
    width: 4.9vmin;
    height: 3.6vmin;
    background: $black-color;
    top: -35.9vmin;
    left: 18.3vmin;
    border-radius: 2vmin 1.6vmin 2.2vmin 2.6vmin;

    &::before {
      width: 2.4vmin;
      height: 1vmin;
      background: $skin-color;
      top: -0.6vmin;
      left: -0.3vmin;
      transform: rotate(-20deg);
    }

    &::after {
      width: 0.7vmin;
      height: 0.7vmin;
      background: $eye-white-color;
      top: 0.9vmin;
      left: 2.4vmin;
      border-radius: 50%;
    }
  }

  &-3 {
    z-index: 5;
    width: 2.8vmin;
    height: 0.2vmin;
    background: $black-color;
    top: -38.9vmin;
    left: 23.4vmin;
    transform: rotate(9deg);
    border-radius: 1vmin 0 0 0;

    &::before {
      width: 3.5vmin;
      height: 0.2vmin;
      background: $black-color;
      top: 0.6vmin;
      left: -4.7vmin;
      transform: rotate(-14deg);
      border-radius: 0 1vmin 0 0;
    }
  }
}

.mouth {
  z-index: 4;
  width: 14vmin;
  height: 5vmin;
  top: -11.8vmin;
  left: -4vmin;
  transform: rotate(-2deg);
  border: 0.2vmin solid $black-color;
  border-top: 0;
  border-radius: 100% 0% 42% 58% / 0% 33% 67% 100%;

  &::before {
    width: 11.4vmin;
    height: 1vmin;
    background: $skin-color;
    top: -0.9vmin;
    left: -0.8vmin;
  }

  &::after {
    width: 5vmin;
    height: 5vmin;
    background: $skin-color;
    top: -1.6vmin;
    left: 12.4vmin;
    transform: rotate(30deg);
  }
}

.neck {
  &-1 {
    z-index: 3;
    width: 11vmin;
    height: 18vmin;
    background: $skin-dark-color;
    top: 19.6vmin;
    left: -0.5vmin;
    overflow: hidden;

    &::before {
      width: 8vmin;
      height: 15vmin;
      background: $skin-color;
      top: 3.7vmin;
      left: -0.7vmin;
      transform: rotate(-12deg);
      border-radius: 0 2.3vmin 4vmin 0;
    }
  }

  &-2 {
    z-index: 3;
    width: 5vmin;
    height: 15vmin;
    background: $black-color;
    top: 15vmin;
    left: -13.8vmin;
    transform: rotate(-2deg);
    border-radius: 0 50% 50% 0;

    &::before {
      width: 5vmin;
      height: 15vmin;
      background: $black-color;
      top: -2vmin;
      left: 12.5vmin;
      border-radius: 50% 0 0 50%;
    }
  }
}

.shirt {
  &-1 {
    z-index: 3;
    width: 6vmin;
    height: 3vmin;
    background: $shirt-dark-color;
    top: 29vmin;
    left: 10.8vmin;
    transform: rotate(-60deg);
    border-radius: 0 0 0 71%;

    &::before {
      width: 6vmin;
      height: 4vmin;
      background: $shirt-color;
      top: -1.1vmin;
      left: -5.2vmin;
      transform: rotate(20deg);
    }

    &::after {
      width: 4.7vmin;
      height: 1.6vmin;
      background: $shirt-dark-color;
      top: -0.6vmin;
      left: -3vmin;
      transform: rotate(20deg) skewX(40deg);
      border-radius: 0 0 0 100%;
    }
  }

  &-2 {
    z-index: 3;
    width: 6.2vmin;
    height: 3vmin;
    background: $shirt-color;
    top: 20vmin;
    left: 13.1vmin;
    transform: rotate(-3deg);
    border-radius: 0 2.2vmin 0 2.8vmin;

    &::before {
      width: 5vmin;
      height: 4.4vmin;
      background: $shirt-color;
      top: 2.8vmin;
      left: 3.6vmin;
      transform: rotate(-30deg);
      border-radius: 3vmin 1vmin 1.2vmin 0;
    }

    &::after {
      width: 5vmin;
      height: 7.3vmin;
      background: $shirt-color;
      top: 5.1vmin;
      left: 0.7vmin;
      transform: rotate(48deg);
    }
  }

  &-3 {
    z-index: 3;
    width: 5.2vmin;
    height: 3vmin;
    background: $shirt-dark-color;
    top: 20vmin;
    left: 12.1vmin;
    transform: rotate(-2deg);
    border-radius: 0 90% 0 90%;

    &::before {
      width: 3vmin;
      height: 3.4vmin;
      background: $shirt-dark-color;
      top: 1.1vmin;
      left: 0.4vmin;
      transform: skewX(6deg);
      border-radius: 0 0 0 100%;
    }

    &::after {
      width: 1.7vmin;
      height: 3.6vmin;
      background: $shirt-dark-color;
      top: 1.7vmin;
      left: 3vmin;
      transform: rotate(38deg);
      border-radius: 50%;
    }
  }

  &-4 {
    z-index: 3;
    width: 8vmin;
    height: 5vmin;
    background: $shirt-color;
    top: 38vmin;
    left: -8.3vmin;
    transform: rotate(39deg);
    box-shadow: -6vmin 0vmin 0 0.01vmin $shirt-color;

    &::before {
      width: 6.4vmin;
      height: 3.3vmin;
      background: $shirt-dark-color;
      top: -1.4vmin;
      left: -3.8vmin;
      transform: rotate(32deg) skewX(-15deg);
      border-radius: 0 0 82% 0;
    }

    &::after {
      width: 8.2vmin;
      height: 1.7vmin;
      background: $shirt-dark-color;
      transform: skewX(-15deg);
      border-radius: 0 0 100% 0;
    }
  }

  &-5 {
    z-index: 3;
    width: 8vmin;
    height: 1vmin;
    background: $shirt-color;
    top: 37.5vmin;
    left: -5.5vmin;
    transform: rotate(24deg);

    &::before {
      width: 2.5vmin;
      height: 2vmin;
      background: $shirt-color;
      top: -7.1vmin;
      left: -5.6vmin;
      transform: rotate(-13deg) skewX(-55deg) skewY(-5deg);
    }

    &::after {
      width: 3vmin;
      height: 5.8vmin;
      background: $shirt-color;
      top: -5.3vmin;
      left: -8.2vmin;
      transform: rotate(8deg);
      border-radius: 2.3vmin 0 0 0.8vmin;
    }
  }

  &-6 {
    z-index: 3;
    width: 2vmin;
    height: 5vmin;
    background: $shirt-dark-color;
    top: 22.3vmin;
    left: -11.2vmin;
    transform: rotate(5deg) skewX(-1deg);
    border-radius: 1.5vmin 0.2vmin 25% 0;

    &::before {
      width: 3vmin;
      height: 3.9vmin;
      background: $shirt-dark-color;
      top: -0.4vmin;
      left: -2.2vmin;
      transform: rotate(15deg) skewX(-10deg);
      border-radius: 100% 0 0 0;
    }

    &::after {
      width: 2vmin;
      height: 5vmin;
      background: $shirt-dark-color;
      top: 2.3vmin;
      left: -2.2vmin;
      transform: rotate(-55deg) skewY(-8deg);
      border-radius: 100% 0 0 0;
    }
  }

  &-7 {
    z-index: 3;
    width: 10vmin;
    height: 1vmin;
    background: $black-color;
    top: 32vmin;
    left: 40vmin;
    transform: rotate(12deg) skewY(3deg);
    border-radius: 0 100% 0 0;

    &::before {
      width: 16vmin;
      height: 18vmin;
      background: $shirt-color;
      top: 0.5vmin;
      left: -5.7vmin;
      transform: rotate(5deg) skewY(-5deg) skewX(-4deg);
      border-radius: 0 3.5vmin 0 0;
      box-shadow: -7vmin 7vmin 0 0.1vmin $shirt-color,
        -20vmin 9.4vmin 0 0.5vmin $shirt-color;
    }

    &::after {
      width: 20vmin;
      height: 24.6vmin;
      background: $shirt-color;
      top: 2vmin;
      left: -3.9vmin;
      transform: rotate(-12deg) skewY(-3deg) skewX(14deg);
      border-right: 0.2vmin solid $black-color;
      border-radius: 0 1.1vmin 0 0;
    }
  }

  &-8 {
    z-index: 3;
    width: 10vmin;
    height: 1vmin;
    background: $black-color;
    top: 30vmin;
    left: -40vmin;
    transform: rotate(-14deg) skewY(3deg);
    border-radius: 100% 0 0 0;

    &::before {
      width: 15vmin;
      height: 5vmin;
      background: $shirt-color;
      top: 0.4vmin;
      left: -0.9vmin;
      transform: rotate(-2deg) skewY(-1deg);
      border-radius: 2vmin 0 0 0;
    }

    &::after {
      width: 20vmin;
      height: 26.3vmin;
      background: $shirt-color;
      top: 1.7vmin;
      left: -6.7vmin;
      transform: rotate(11deg) skewX(-14deg);
      border-left: 0.2vmin solid $black-color;
      border-radius: 1.2vmin 10vmin 0 0;
    }
  }

  &-9 {
    z-index: 3;
    width: 28vmin;
    height: 7vmin;
    background: $shirt-color;
    top: 77.5vmin;

    &::before {
      width: 0;
      height: 0;
      border-left: 1vmin solid transparent;
      border-right: 1vmin solid transparent;
      border-bottom: 7.2vmin solid $shirt-dark-color;
      top: -0.2vmin;
      left: -6.1vmin;
      transform: skewX(-8deg);
    }

    &::after {
      width: 0;
      height: 0;
      border-left: 1vmin solid transparent;
      border-right: 1vmin solid transparent;
      border-bottom: 7.2vmin solid $shirt-dark-color;
      top: -0.2vmin;
      left: 33vmin;
      transform: skewX(8deg);
    }
  }
}

              
            
!

JS

              
                // lynn fisher did the original artwork
// I just turn the design into code
// visit her website for more info
// https://lynnandtonic.com/
              
            
!
999px

Console