在另一张图片上覆盖底部三角形的图像

Question

在另一张图片上覆盖底部三角形的图像

16

创建图片底部的箭头很简单。

但是是否可以实现像这样的效果，其中第二个图像不是背景，而是在第一个图像之后：带有三角形底部的图像

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

- Nicolai

这是此链接的副本。但是，如果您想要重叠...您可以使用负边距。 - Imran Bughio

尝试使用 Stack Snippets 而不是 codepen.io 等网站。 - AStopher

@ImranBughio，你发布的链接中的示例回答了关于父子关系的问题，但我问的是兄弟元素。 - Nicolai

好问题！我会用星号将其添加到我的收藏夹中，以便及时了解这个话题的更新。祝你好运，因为这是一个非常有趣的问题。 - Marcos Pérez Gude

3个回答

6

你好，我还没有深入展示代码，但根据你所需的输出图像，我已按照我的方式创建了以下内容，这就是代码：

请注意：此代码不适用于Internet Explorer和FireFox浏览器。

在FireFox中，clip-path仅支持url值

有关浏览器支持，请参阅以下参考链接：

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>

这里是与此相关的工作演示代码：

演示代码

- Himesh Aadeshara

@Nicolai，请看一下我的回答。 - Himesh Aadeshara

@Nicolai 让我检查一下。 - Himesh Aadeshara

@Nicolai 在IE和FireFox中，这个clip-path不被支持，抱歉啊，但是Chrome完全支持。 - Himesh Aadeshara

@Nicolai甚至找不到任何替代方案，所以我会在找到其他方法之前将其包含进来。 - Himesh Aadeshara

-1

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

- David A Negrete

问题在于如何使用 z-index 来实现我需要的效果……而且我不能使用已经在底部具有箭头的透明 .png 图像。 - Nicolai

使用 z-index 和 nth-child 来定位 .wrap 类，例如：.wrap:nth-child(1){ z-index: 2; }。 - Imran Bughio

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- web-tiki · Accepted Answer

在您链接的答案中，有两种方法可以实现您寻找的输出结果。

如果您查看第4个方法（带三角形的工具提示位于图像上方），所显示的技术与Facebook在悬停名称时使用的提示相同。

虽然该方法具有更好的浏览器支持，但我更喜欢使用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/600/400/people/1" 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/600/400/nature/1" 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/600/400/abstract/6" width="600" height="400" clip-path="url(#clip)"/>
</svg>

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

输出：

带底部三角形的图像

更多信息请参见MDN：

clipPath
svg