SVG

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 / clip-path

另一种方法是使用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 2

SVG

CSS中很难实现复杂的形状我建议使用SVG来创建这个形状

＆＃13;

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

＆＃13;

Answer 3

您可以通过SVG图像蒙版实现此效果。我不知道你面具的尺寸，但这个链接可以帮助你：

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

Answer 4

您可以使用下面的内容来获得所需的效果，您必须对其进行编辑才能添加图片。但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>

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

4 个答案:

CSS

SVG / clip-path

SVG