CSS формы не перекрывают следующий DIV - PullRequest
Новая
       9

CSS формы не перекрывают следующий DIV

0 голосов
/ 11 мая 2018

Я пытаюсь создать 1 фигуру в CSS (V-фигуру).Это работает, но когда я делаю фигуру отрицательной и помещаю ее перед другим div с фоном, я не могу заставить форму показывать «выше» следующего div с background-image.

См. https://www.bootply.com/dennisgodderie/kBHH7SuoHD Div "content 2" должен находиться под предыдущим div (red-v-neg), но когда я использую margin-top: -100px;он перекрывает красн-в-нег.Даже если я использую z-index.Или я что-то забыл?

1 Ответ

0 голосов
/ 12 мая 2018

Это код, который я использую для этого CSS / HTML 

.red-v{
    width:0;
    height:170px;
    border-top: 100px solid transparent;
    border-left: 35vw solid #ed4447;
    border-right: 65vw solid #ed4447;
    border-bottom:0;
}
.red-v-neg{
    width:0;
    height:170px;
    border-bottom: 100px solid transparent;
    border-left: 65vw solid #ed4447;
    border-right: 35vw solid #ed4447;
    border-top:0;
    background: transparent;
}
.content{
    padding:60px 0;
    background: #ed4447;
}
.content-2{
    padding:100px 0;
    background: url(http://victus.be/new/img/home-2b.jpg) no-repeat fixed 80% 50%;
}

<div class="red-v"></div>
<div class="content">
  <h1>Content</h1>
</div>
<div class="red-v-neg"></div>
<div class="content-2">
  <h1>Content 2</h1>
</div>
...