Cut corners of Image using css
<p>I want to cut image corners with transperant background. I have written following code. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body{
  background-image:url('http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg');
}

.Image{
position:absolute;
  width:200px;
  height:200px;
}

.Image img{
  width:100%;
  height:100%;
}

.Image:before {
    position: absolute;
    content: "";
    border-top: 60px solid red;
    border-right: 60px solid transparent;
    top: -1px;
    left: -1px;
}
.Image:after {
    position: absolute;
    content: "";
    border-bottom: 60px solid red;
    border-left: 60px solid transparent;
    bottom: -1px;
    right: -1px;
}

.blackBg{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="blackBg"&gt;&lt;/div&gt;

&lt;div class="Image"&gt;
  &lt;img src="http://www.w3schools.com/css/img_fjords.jpg"&gt;
  &lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>How can I cut image corners using css, also I don't want to use canvas or svg for this. I'd like to do it in pure CSS, are there any methods?</p>

<p><a href="https://i.stack.imgur.com/2RZBT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2RZBT.png" alt="enter image description here"></a></p>

<p>I want shape like this.</p>