我希望能够使用透明背景裁剪图像角落,我已经编写了以下代码。
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>
我如何使用CSS裁剪图像角落,同时我不想使用Canvas或SVG。我想在纯CSS中完成,有没有方法?
我想要这样的形状。