使用css剪切图像的角落

Question

我想用透明背景切割图像角落。我写了以下代码。

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 剪切图像边角，我也不想为此使用画布或 svg。我想用纯 CSS 来做，有什么方法吗？

我想要这样的形状。

Answer 1

删除了前后伪部分并添加了剪辑路径样式。

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

将容器向右旋转 45 度，将溢出设置隐藏在其上。并使高度更大，这样它就不会夹住不需要的角落。

旋转图像 -45 度，使其再次水平。

你就完成了：

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>