Reverse clip path with blend modes

index.html

<!-- Define our SVG clip path -->
<svg width='0' height='0'>
  <defs>
    <clipPath id="cp" clipPathUnits="objectBoundingBox">
      <path d="M0.500, 0.945 L0.994, 0.090 L0.006, 0.090 L0.500, 0.945 L0.500, 0.650 L0.262, 0.238 L0.738, 0.237 L0.500, 0.650z"></path>
    </clipPath>
  </defs>
</svg>

<!-- The actual elements we're using -->
<div class="triangle first"></div>
<div class="triangle second"></div>

reverse-clip-path-with-blend-modes.markdown

Reverse clip path with blend modes

A demo of reverse path inspired by Dash Berlin's "We Are" album art with some gifs and blend modes for style.

It makes use of the reverse clip path approach outlined by Ana Tudor https://css-tricks.com/cutting-inner-part-element-using-clip-path/

A Pen by Leetcodes on CodePen.

License.

script.js

// For more check out zachsaucier.com

style.scss

html {
  min-height: 100%;
  background: #B8BEB4;
  background: radial-gradient(#B8BEB4, #71685F);
  background-size: cover;
}

.triangle {
  // The actual clipping effect
  clip-path: url(#cp);
  
  // Keep it proportional
  width: 50vw;
  height: 50vw;
  max-height: 75vh;
  max-width: 75vh;
  
  // Add the styling
  background-size: cover;
  background-blend-mode: screen;
  
  // Center them
  position: absolute;
  top: 50%;
  left: 50%;
}

.first {
  background-color: #C5075C;
  background-image: url("https://media.giphy.com/media/pE6GG0V2JCKUo/giphy.gif");
  
 transform: translateX(-65%) translateY(-50%);
}

.second {
  background-color: #03B897; 
  background-image: url("https://media1.giphy.com/media/fLg3MEWdgH5Ti/200.gif");
  
  transform: translateX(-35%) translateY(-50%);
  
  opacity: 0.8;
}