如何从 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

您可以使用 SVG 图像遮罩实现此效果。我不知道你面具的尺寸，但这个 link 应该对你有帮助：

http://vanseodesign.com/web-design/svg-masking-examples-2/

Answer 2

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

Answer 3

您可以使用类似下面的内容来获得所需的效果，您必须对其进行编辑以向其添加图片。但是 CSS before 标签是你的朋友

已更新

.clipboard, .shadowboard {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background-color: #d3d0c9;
    background-image: url(http://i1.wp.com/cdn.batman-news.com/wp-content/uploads/2014/06/Batman-News-Default.jpg);
    background-size: cover;
    background-position: center center;
        border-top-right-radius: 65px;
}

<div class="clipboard" style="-webkit-clip-path: polygon(0 31%, 100% -4%, 100% 100%, 0% 100%);clip-path: polygon(0 31%, 100% -4%, 100% 100%, 0% 100%);"></div>

Answer 4

SVG

在 CSS 中很难实现复杂的形状。
我会推荐使用 SVG 来创建这个形状

<svg viewBox="0 0 100 100" width="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
  <clipPath id="clip">
    <path d="M5,20 
                         C0,20 70,10 70,10 
                         C70,10 85,10 85,30
                         V95
                         H5Z"/>
  </clipPath>
  <image clip-path="url(#clip)" xlink:href="https://placekitten.com/g/300/300" x="0" y="0" height="100%" width="100%"/>
</svg>

如何从 CSS 中的图像中获取此部分对角线形状

How to get this partially diagonal shape from an image in CSS

html

css

twitter-bootstrap

css-shapes

CSS

SVG/剪辑路径

SVG