svg triangle

HTML

<div class='container'>
    
    <div class="inner">
        <img src="http://localhost:1314/images/homepage.png"/>
    <svg 
         width="100%"
         height="100%"
         viewbox="0 0 300 300"
         >
        <rect width="100%"
              height="100%"
              clip-path="url(#mask)"
              style="fill:white"/>
        <defs>
            <clipPath id="mask">
                <polygon points="150,0 0,300 0,0 300,0 300,300"  />    
            </clipPath>
        </defs>
    </svg>
    </div>
</div>

CSS

body { background : pink; }
svg {
    border : solid 1px black;
    position : absolute;
    top : 0;
    left : 0;
}
img {
    width : 300px;
    height : 300px;
}
.inner {
    width : 200px;
    
    overflow : hidden;
    position : relative;
    height : 200px;
    border : solid 2px blue;
}