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

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-м подходом (подсказка с треугольником над изображением.), То указанная техника такая же, как то, что использует 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>

Обратите внимание, что для простоты демо использует изображения с тем же соотношением сторон.Каждое изображение находится в своем собственном формате SVG тег для ремонтопригодности (например: добавить или удалить изображение)

Выход:

Более подробную информацию о MDN:

• clipPath
• svg

Answer 2

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

Answer 3

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

я создал следующий на моем пути, и здесь это код этого

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

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

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

Browser Support for clip-path

.boundry{ 
 
    margin-top:100px; 
 
    margin-left:100px; 
 
    width:50%; 
 
    margin-bottom:100px;  
 
} 
 
.arrow_box { 
 
    height:180px; 
 
\t position: relative; 
 
\t background: #88b7d5; \t 
 
    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>

и здесь рабочий демонстрационный код для этого

Demo Code