<div class='wrapper'>
  <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>

  <div class="triangle first"></div>
</div>

html, body {
  height: 100%;
  width: 100%;
  margin: 0; 
  padding: 0;
}

body {
  background: #F4F4F4;
  display: flex;
  justify-content: center;
  align-items: center;
}


.wrapper {
  transform-origin: center center;
  transform: rotate(180deg);
}

.triangle {
  -webkit-clip-path: url(#cp);
          clip-path: url(#cp);
  width: 300px;
  height: 300px;
  background-size: cover;
  background-blend-mode: screen;
}

.first {
  background-color: #333;
  background-image: url("https://i2.wp.com/www.thisiscolossal.com/wp-content/uploads/2017/07/wave-1.gif");
}