<!-- Define our SVG clip path -->
<svg width='0' height='0'>
    <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>

<!-- The actual elements we're using -->
<div class="triangle first"></div>
<div class="triangle second"></div>
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://45.media.tumblr.com/d6946dbae92220c65838e861a365affb/tumblr_mzs9uzNKDZ1qddrn0o1_500.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;
View Compiled
// For more check out zachsaucier.com

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.