使用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剪切图像角落，我也不想使用canvas或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度， 设置隐藏在它上面的溢出。 并使高度更大，以免夹住不需要的角落。

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

你完成了：

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

您（希望）很快就可以使用border-corner-shape 像这样（现在圆角可能显示为后备）并且不需要使用伪元素

＆＃13;

＆＃13;

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);
}

＆＃13;

<div class="blackBg"></div>

<div class="Image">
  <img src="http://www.w3schools.com/css/img_fjords.jpg">
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

你可以通过添加额外的元素或通过css伪元素来实现欲望结果：之前＆amp; ：后

＆＃13;

＆＃13;

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;}

＆＃13;

<div class="img-ctnr">
  <div class="img"></div>
</div>

＆＃13;

＆＃13;

＆＃13;