底部三角形覆盖另一个图像的图像

It is simple to create arrow at the bottom of image.

在图像底部创建箭头很简单。

But is this possible to achive something like this where second image is not background but another image that goes after first image:

但是，如果第二张图像不是背景而是第一张图像之后的另一张图像，这是否可能达到这样的效果：

I created "pen" on codepen.io

我在codepen.io上创建了“pen”

.wrap {
  position: relative;
  overflow: hidden;
  width: 70%;
  height: 200px;
  margin: 0 auto;
}
.wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.arrow {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.arrow:before,
.arrow:after {
  content: '';
  position: absolute;
  bottom: 100%;
  width: 50%;
  box-sizing: border-box;
}
.arrow:before {
  right: 50%;
  border-bottom: 20px solid #000;
  border-right: 20px solid transparent;
}
.arrow:after {
  left: 50%;
  border-bottom: 20px solid #000;
  border-left: 20px solid transparent;
}

<div class="wrap">
  <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" />
  <div class="arrow"></div>
</div>
<div class="wrap">
  <img src="http://i.imgur.com/EinPKO3.jpg" />
  <div class="arrow"></div>
</div>

3 个解决方案

#1

In the answer you linked to there are 2 approaches that allow the output you are looking for.

在您链接的答案中，有两种方法可以提供您正在寻找的输出。

If you look under the 4th approach (Tooltip with a triangle over an image.) the technique shown is the same as what facebook uses for tooltips when you hover a name.

如果你看第4种方法（工具提示，图像上有一个三角形），显示的技术与你在悬停名称时用于工具提示的技术相同。

Although this approach has a better browser support, I would prefer to use an svg approach (also provided in the post you linked to) with the clipPath element to make the triangle at the bottom.

虽然这种方法有更好的浏览器支持，但我更喜欢使用svg方法（在链接的帖子中也提供）和clipPath元素，以使三角形位于底部。

Adapted to your use case, it could look like this :

适应您的用例，它可能如下所示：

*{margin:0;}
svg{
  display:block;
  position:relative;
  margin-bottom:-3.5%;
  z-index:50;
}
svg:nth-child(2){
  z-index:49;
}
svg:nth-child(3){
  z-index:48;
}

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 600 400">
  <defs>
    <clipPath id="clip">
      <path d="M0 0 H600 V380 H320 L300 400 L280 380 H0z" />
    </clipPath>
  </defs>
  <image xlink:href="http://lorempixel.com/output/people-q-g-600-400-1.jpg" width="600" height="400" clip-path="url(#clip)"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 600 400">
  <image xlink:href="http://lorempixel.com/output/nature-q-c-600-400-1.jpg" width="600" height="400" clip-path="url(#clip)"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 600 400">
  <image xlink:href="http://lorempixel.com/output/abstract-q-g-600-400-6.jpg" width="600" height="400" clip-path="url(#clip)"/>
</svg>

Note that for simplicity the demo uses images with the same aspect ratio. Each image is in its own svg tag for maintainability (example: add or remove an image)

请注意，为简单起见，演示使用具有相同宽高比的图像。为了可维护性，每个图像都在自己的svg标记中（例如：添加或删除图像）

Output :

输出：

More info on MDN :

有关MDN的更多信息：

• clipPath
• clipPath
• svg
• SVG

#2

hi i haven't show you code deeply but as per your desired out put image

嗨，我没有向您展示深度代码，但根据您所需的输出图像

i have created following in my way and here it is the code of that

我已经按照自己的方式创建了以下内容，这里是代码

Please Note : This will not work with the Internet Explorer and FireFox

请注意：这不适用于Internet Explorer和FireFox

In FireFox clip-path support by the only url value

在FireFox剪辑路径支持中唯一的url值

for browser support please look at following reference link

浏览器支持请查看以下参考链接

Browser Support for clip-path

浏览器支持剪辑路径

.boundry{   
    margin-top:100px;
    margin-left:100px;
    width:50%;
    margin-bottom:100px;    
}
.arrow_box {
    height:180px;
	position: relative;
	background: #88b7d5;	  
    padding:15px;     
    text-align:center;    
    color:white;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 46% 80%, 51% 90%, 56% 80%, 0% 80%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 46% 80%, 51% 90%, 56% 80%, 0% 80%);
}
.arrow_box:nth-child(1){         
    background:url('http://3.bp.blogspot.com/-lz3nDbV440A/VO4QpcN4ZCI/AAAAAAAAN94/PAYUtUysb-4/s1600/happy-holi-images-2015%2B(9).jpg');  
    color:grey;
    z-index: 5;
}
.arrow_box:nth-child(2){
    margin-top: -42px;
    margin-bottom: -35px;      
    background:url('http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg');
}

<div class="boundry" >
    <div class="arrow_box">
       <h1 class="logo">first image</h1>
    </div>
    <div class="arrow_box">
       <h1 class="logo">second image</h1>
    </div>
</div>

and here is the working demo code for this

这是这个的工作演示代码

Demo Code

演示代码

#3

If you want to stack images you have many different methods to use. You can always use the z-index to put them in different orders. You can use .png files to add contrast to the layout.

如果要堆叠图像，可以使用许多不同的方法。您始终可以使用z-index将它们放在不同的顺序中。您可以使用.png文件为布局添加对比度。