如何从CSS中的图像获得这种部分对角线形状

Question

我正在使用bootstrap 4并尝试创建这种形状的图像:

整个正方形是我的形象,但我想切掉红色部分或使其透明,以便看到背景颜色.

<div class="container">
   <div class="row">
       <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
           <img src="path/to/image" class="img-fluid" alt="Some text">
       </div>
   </div>
</div>

我怎么做到这一点？

Answer 1

CSS

这可以通过CSS轻松实现border-radius.下面是一个简单的例子.

body {
  background: blue;
}
img {
  border-radius: 100% 20% 0% 0% / 15% 40% 0% 0%;
  overflow: hidden;
}

<img src="https://placekitten.com/200/200" />

使用您提供的HTML,添加它就像这么简单

body {
  background: blue;
}
img {
  border-radius: 100% 20% 0% 0% / 15% 40% 0% 0%;
  overflow: hidden;
}

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
      <img src="https://placekitten.com/200/200" class="img-fluid" alt="Some text">
    </div>
  </div>
</div>

SVG /剪辑路径

另一种方法是使用SVG剪辑路径,然后在图像上使用.

这与Persijn的答案略有不同,但也是如此

body {
  background: red;
}
img {
  -webkit-clip-path: url("#shape_clip");
  clip-path: url("#shape_clip");
  width: 200px;
  height: 200px;
}

<svg width="0" height="0">
  <defs>
    <clipPath id="shape_clip" clipPathUnits="objectBoundingBox">
      <path d="M0,1 L1,1 L1,.3 Q1,0 .65,.1 L0,.25z" />
    </clipPath>
  </defs>
</svg>

<img src="https://placekitten.com/200/300" />