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

Question

创建箭头at the bottom of image很简单。

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

我在codepen.io

上创建了“笔”

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

Answer 1

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

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

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

根据您的使用情况，它可能如下所示：

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

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

输出：

有关MDN的更多信息：

• clipPath
• svg

Answer 2

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

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

的代码

  

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

     

在唯一网址值

的FireFox剪辑路径支持中      

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

     

<强> Browser Support for clip-path

＆＃13;

＆＃13;

.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');
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是

的工作演示代码

<强> Demo Code

Answer 3

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