Изображение с нижним треугольником, накладывающим другое изображение

Просто создать стрелку в нижней части изображения.

Но возможно ли это достичь чего-то подобного, когда второе изображение не является фоном, а другим изображением, которое идет после первого изображения:

Я создал "pen" на 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>

Ответы

Ответ 1

В ответе, который вы указали, есть два подхода, которые позволяют вывод, который вы ищете.

Если вы подходите под 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/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>

Ответ 2

Привет, я не показывал вам код глубоко, но в соответствии с вашим желаемым размещенным изображением

Я создал следующее на моем пути, и вот это код этого

Обратите внимание. Это не будет работать с Internet Explorer и FireFox

В поддержке поддержки кликов FireFox единственным значением URL

для поддержки браузера, пожалуйста, просмотрите следующую ссылку ссылки

Поддержка браузера для клипа

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

Ответ 3

Если вы хотите складывать изображения, у вас есть много разных методов. Вы всегда можете использовать z-index, чтобы поместить их в разные заказы. Вы можете использовать .png файлы, чтобы добавить контраст к макету.