使用CSS裁剪图像的角落

Question

使用CSS裁剪图像的角落

3

我希望能够使用透明背景裁剪图像角落，我已经编写了以下代码。

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中完成，有没有方法？

我想要这样的形状。

- vedankita kumbhar

你说的"cutting corners"是什么意思？你需要圆角吗？ - Jeet

不，我不想要圆角。无论我在代码片段中写了什么，我想要的是透明度而不是红色。 - vedankita kumbhar

尝试使用border-radius:4px; - Naveed Ramzan

5个回答

6

将容器向右旋转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>

- vals

1

您很快就可以像这样使用border-corner-shape（现在圆角可能会作为后备出现），而无需使用伪元素

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>

- Theodore K.

0

您可以通过添加额外的元素或通过CSS伪元素: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>

- Shyam

我在这个div后面使用背景图片，所以我不能使用background:#fff;来设置after before的背景。 - vedankita kumbhar

0

在你的 CSS 中只需要这样做：

background: linear-gradient(135deg,rgb(72, 72, 245) 95% , rgba(255, 255, 255, 0) 5%) ;

- Dejan Cvetkovski

1

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- aavrug · Accepted Answer

我删除了您之前和之后的伪元素部分，并添加了clip-path样式。

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>