Как сделать прозрачную маску?

* { 
  margin: 0; 
  padding: 0; 
} 
 
body { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
 
.wrapper { 
  margin: 1rem; 
  position: relative; 
} 
 
.wrapper img { 
  width: 100%; 
} 
 
.wrapper::before { 
  content: ""; 
  display: block; 
  position: absolute; 
  top: 0; 
  border-top: 250px solid; 
  border-left: 250px solid; 
  border-color: transparent rgba(255, 255, 0, 0.5); 
} 
 
.wrapper::after { 
  content: ""; 
  position: absolute; 
  top: 0; 
  border: none; 
  border-bottom: 250px solid; 
  border-right: 250px solid; 
  border-color: transparent rgba(255, 0, 255, 0.5); 
}

<div class="wrapper"> 
  <img src="https://via.placeholder.com/250x250"> 
</div>

* { 
  margin: 0; 
  padding: 0; 
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 500"> 
  <g> 
    <image xlink:href="https://via.placeholder.com/200x200"/> 
    <polygon points="0, 0 0, 200 200,200" fill="rgba(255, 0, 255, 0.5)"/> 
    <polygon points="200, 0 200, 200 0,0" fill="rgba(255, 255, 0, 0.5)"/> 
  </g> 
</svg>