Edit on
p 
  | A step by step example of how to use mix-blend-modes to fude masks similar to ones available in photoshop. 
p Made to accompany 
  a(href="https://codepen.io/jonnyscholes/blog/css-blend-modes") a blog post on the subject.

p Our goal:
img(src="https://i.imgur.com/bAxYsby.jpg", width="640")

p Step 1:
.step-1
  img(src="https://farm6.staticflickr.com/5615/15829658681_a65c4d6963_z.jpg")

p Step 2:
.step-2
  .step-2--mask
  img(src="https://farm6.staticflickr.com/5615/15829658681_a65c4d6963_z.jpg")

p Step 3:
.step-3
  .step-3--mask
  img(src="https://farm6.staticflickr.com/5615/15829658681_a65c4d6963_z.jpg")

p Step 4 - finished:
.step-4
  .step-4--mask
  img(src="https://farm6.staticflickr.com/5615/15829658681_a65c4d6963_z.jpg")
View Compiled


.step-1 {
  position: relative;
  border: 1px solid red;
  display: inline-block;
  &:before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid white;
  }
  img {
    display: block;
  }
}


.step-2 {
  position: relative;
  border: 1px solid red;
  display: inline-block;
  &:before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid white;
  }
  img {
    display: block;
  }
  &--mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: white;
    &:before {
      position: absolute;
      content: '';
      width: 0;
      height: 0;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid black;
    }
  }
}

.step-3 {
  position: relative;
  border: 1px solid red;
  display: inline-block;
  &:before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid white;
  }
  img {
    display: block;
  }
  &--mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: white;
    &:before {
      position: absolute;
      content: '';
      width: 0;
      height: 0;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid black;
    }
    &:after { // Step 3
      mix-blend-mode: lighten;
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: url(https://farm4.staticflickr.com/3888/15002876851_945906f3d6_z.jpg);
    }
  } 
}


.step-4 {
  position: relative;
  border: 1px solid red;
  display: inline-block;
  &:before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid white;
  }
  img {
    display: block;
  }
  &--mask {
    mix-blend-mode: darken; // Step 3
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: white;
    &:before {
      position: absolute;
      content: '';
      width: 0;
      height: 0;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid black;
    }
    &:after { // Step 3
      mix-blend-mode: lighten;
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: url(https://farm4.staticflickr.com/3888/15002876851_945906f3d6_z.jpg);
    }
  }
  
}
View Compiled
Rerun