html - 如何从 CSS 中的图像中获取这个部分对 Angular 线形状

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" />