Покажите фоновый цвет DIV с нижним индексом z

Question

Я хочу сделать часть DIV (div2) прозрачной, чтобы он отображал фоновый цвет DIV (div1), который находится под DIV (div2).

http://jsfiddle.net/499nhjb0/2/

<br> 
<div class="firstDiv" style="z-index:1;" > 
    <img src="http://fs1.directupload.net/images/150226/fag7h2u7.png" style="display:block;" width="auto" height="50"/> 
</div> 

<div class="secondDiv" style="z-index:2; "> 
    <img src="http://fs2.directupload.net/images/150226/xmv678we.png" style="display:block;" width="auto" height="50"/> 
</div> 
<br> 
div1 with higher z-index 
<br> 
<div class="firstDiv" style="z-index:3;" > 
    <img src="http://fs1.directupload.net/images/150226/fag7h2u7.png" style="display:block;" width="auto" height="50"/> 
</div> 

<div class="secondDiv" style="z-index:2; "> 
    <img src="http://fs2.directupload.net/images/150226/xmv678we.png" style="display:block;" width="auto" height="50"/> 
</div> 
<br> 

Изображения я использовать прозрачные поэтому цвет (Div-фон) является переменным. В настоящее время пик image1 выглядит как не из image1. Я хочу, чтобы это выглядело так:

Я создал два типа изображений, которые вы можете увидеть в скрипке.

У вас есть идея, как решить эту проблему? Я могу изменить изображение прозрачности, если у вас есть идея. Изображения могут быть разными.

Answer 1

Вы действительно не нужны изображений здесь, вы можете использовать CSS 100% решение с CSS треугольником:

.arrow { 
 
    width:100px; 
 
    height:50px; 
 
    background-color: red; 
 
    position: relative; 
 
    float: left; 
 
} 
 
.arrow:before, 
 
.arrow:after{ 
 
    content: ""; 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 25px 0 25px 50px; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 
.arrow:before { 
 
    left:0; 
 
    border-color: transparent transparent transparent #fff; 
 
} 
 
.arrow:after { 
 
    right:-50px; 
 
} 
 

 
.arrow-left { 
 
    z-index:1; 
 
    background-color: red; 
 
} 
 
.arrow-left:after { 
 
    border-color: transparent transparent transparent red; 
 
} 
 

 
.arrow-right { 
 
    margin-left: 10px; 
 
    background-color: blue; 
 
} 
 

 
.arrow-right:after { 
 
    border-color: transparent transparent transparent blue; 
 
}

<div class="arrow arrow-left"></div> 
 
<div class="arrow arrow-right"></div>

Answer 2

Ваш подход неверен: ваши изображения состоят из большой прозрачной «дыры» в форме стрелки, которую вы заполняете фоновым цветом, и части, внешние по отношению к стрелке (три треугольника), которые являются белыми:

И вот что вызывают проблемы. Пример:

.arrow { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 125px; 
 
    height: 50px; 
 
    vertical-align: top; 
 
    background-image: url(http://fs1.directupload.net/images/150226/fag7h2u7.png); 
 
    background-repeat: no-repeat; 
 
    background-position: top left; 
 
    background-size: 125px; 
 
} 
 
.red { 
 
    background-color: red; 
 
} 
 
.blue { 
 
    background-color: blue; 
 
}

<div class="arrow red"></div> 
 
<div class="arrow blue"></div> 
 
<br> 
 
<div class="arrow red" ></div> 
 
<div class="arrow blue" style="left: -30px;"></div> 
 
<br> 
 
<div class="arrow red" ></div> 
 
<div class="arrow blue" style="left: -30px; z-index: -1;"></div>

Решение: просто инвертировать подход, превращая свои образы в них, состоящие из большого цветного стрелки и трех прозрачных треугольников по сторонам; то вы можете перекрывать их без переопределения объектов ниже (читайте: предыдущие и следующие стрелки).

Answer 3

Вот работоспособный Exemple, с более эффектом и активным состоянием : http://jsfiddle.net/jo27axjc/1/

Удачи!

.breadcrumb { 
    display: inline-block; 
    overflow: hidden; 
} 
.breadcrumb a { 
    text-decoration: none; 
    outline: none; 
    display: block; 
    float: left; 
    font-size: 12px; 
    line-height: 36px; 
    color: white; 
    padding: 0 20px 0 10px; 
    background: blue; 
    position: relative; 
} 
.breadcrumb a:first-child:before { 
    left: 14px; 
} 
.breadcrumb a:last-child { 
    border-radius: 0 5px 5px 0; 
} 
.breadcrumb a.active, .breadcrumb a:hover span, .breadcrumb a:hover{ 
    background: red; 
} 
.breadcrumb a.active:after, .breadcrumb a:hover:after { 
    background: red; 
} 
.breadcrumb a span{ 
    display: block; 
    z-index: 2; 
    position: relative; 
    left: 20px; 
    background: blue; 
    padding-right: 5px; 
} 
.breadcrumb a.active{ 
    padding-left:0; 
} 
.breadcrumb a.active span{ 
    background:red; 
} 
.breadcrumb a:after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    right: -18px; 
    width: 36px; 
    height: 36px; 
    transform: scale(0.707) rotate(45deg); 
    z-index: 1; 
    background:blue; 
    box-shadow: 
     2px -2px 0 2px rgba(255, 255, 255, 1), 
     3px -3px 0 2px rgba(255, 255, 255, 0.1); 
} 
.breadcrumb a:last-child:after { 
    content: none; 
    box-shadow:none; 
} 

Answer 4

Я нахожу новое решение, но его нелегко реализовать. Сначала вам нужен калькулятор и знаете, как работает Math Pythagore.

Идея состоит в том, чтобы иметь коробку с фоновым изображением и одно и то же изображение на дочернем объекте, а затем поместить дочернее изображение справа, а затем повернуть, сложная часть - разместить именно изображение, соответствующее фоновому изображению.

Для разделителя я использовал повернутый квадрат, расположенный между двумя стрелками. Тогда для последней стрелки я использовал тот же путь к первой стрелке без треугольника, чтобы скрыть первую часть. Все помещены в абсолютный с z-индексом.

Но, наконец, работать с изображениями. Наслаждайтесь!

.wrap { 
 
    position: relative; 
 
    height: 100px; 
 
    overflow: hidden; 
 
} 
 

 
.arrow { 
 
    position: absolute; 
 
    width: 136px; 
 
    height: 100px; 
 
} 
 
.arrow-left:before { 
 
    content: ""; 
 
    position:absolute; 
 
    top: 0; 
 
    left:0; 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 50px 0 50px 50px; 
 
    border-color: transparent transparent transparent #ffffff; 
 
} 
 

 
.arrow span { 
 
    width:70.71px; 
 
    height:70.71px; 
 
    overflow: hidden; 
 
    transform: rotate(45deg); 
 
    position: absolute; 
 
    top: 14px; 
 
    right: -35px; 
 
} 
 
.arrow span img { 
 
    position: absolute; 
 
    top: 11px; 
 
    right: -40px; 
 
    transform: rotate(-45deg); 
 
} 
 

 
.arrow-left { 
 
    background: url(http://lorempicsum.com/futurama/200/100/1) 0 0 no-repeat; 
 
    z-index: 3; 
 
} 
 

 
.separator { 
 
    left: 95px; 
 
    background: #fff; 
 
    width:90px; 
 
    height:90px; 
 
    transform: rotate(45deg); 
 
    position: absolute; 
 
    top: 4.5px; 
 
    z-index:2; 
 
} 
 

 
.arrow-right { 
 
    background-image: url(http://lorempicsum.com/simpsons/200/100/1); 
 
    position: absolute; 
 
    top: 0; 
 
    left: 150px; 
 
    z-index: 1; 
 
}

<div class="wrap"> 
 
    <div class="arrow arrow-left"> 
 
    <span> 
 
     <img src="http://lorempicsum.com/futurama/200/100/1" alt="" /> 
 
    </span> 
 
    </div> 
 
    <div class="separator"></div> 
 
    <div class="arrow arrow-right"> 
 
    <span> 
 
     <img src="http://lorempicsum.com/simpsons/200/100/1" alt="" /> 
 
    </span> 
 
    </div> 
 
</div>

Также можно посмотреть на моем codepen: http://codepen.io/pik_at/pen/dPKXWp