Cut corners of Image using css - html

Question

I want to cut image corners with transperant background. I have written following 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);
}
<div class="blackBg"></div>
<div class="Image">
<img src="http://www.w3schools.com/css/img_fjords.jpg">
</div>
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?
I want shape like this.

Answer 1

Removed your before and after pseudo part and added clip-path styling.
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%;
-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%, 0% 86%, 0% 20%);
clip-path: polygon(20% 0%, 80% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%, 0% 86%, 0% 20%);
}
}
.blackBg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
}
<div class="blackBg"></div>
<div class="Image">
<img src="http://www.w3schools.com/css/img_fjords.jpg">
</div>

Answer 2

Rotate the container 45 deg to the right,
set overflow hidden on it.
and make the height bigger so that it won't clip the undesired corners.
Rotate the image -45deg so that it is horizontal again.
And you are done:
body {
background-image: url('http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg');
}
.Image {
position: absolute;
width: 200px;
height: 400px;
transform: rotate(45deg);
overflow: hidden;
margin-top: -100px;
}
.Image img {
width: 100%;
height: 50%;
margin-top: 100px;
transform: rotate(-45deg);
}
.blackBg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
}
<div class="blackBg"></div>
<div class="Image">
<img src="http://www.w3schools.com/css/img_fjords.jpg">
</div>

Answer 3

You will (hopefully) soon be able to use border-corner-shape
like this (now rounded corners may appear as fallback) and no need to use pseudo elements
body{
background:green;
}
.Image{
position:absolute;
width:200px;
height:200px;
}
.Image img{
width:100%;
height:100%;
border-corner-shape: bevel;
border-radius:30px 0 30px 0;
}
.blackBg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
}
<div class="blackBg"></div>
<div class="Image">
<img src="http://www.w3schools.com/css/img_fjords.jpg">
</div>

Answer 4

You can achive desire result through adding extra element or through css pseudo elements :before & :after
body{background:#fff;}
.img-ctnr{position:relative;}
.img{width:450px;height:300px;background:purple;}
.img-ctnr:before,.img-ctnr:after{
content:'';position:absolute;display:block;
width:100px;height:100px;
background:#fff;
transform:rotate(45deg);
}
.img-ctnr:before{top:-50px;left:-50px;}
.img-ctnr:after{top:250px;left:400px;}
<div class="img-ctnr">
<div class="img"></div>
</div>

Answer 5

Just do this in your css:
background: linear-gradient(135deg,rgb(72, 72, 245) 95% , rgba(255, 255, 255, 0) 5%) ;