2016-04-27 2 views

ответ

1

Это не «подключенные backgorunds». Это достигается добавлением треугольника к нижней части синей секции с отрицательным нижним краем, который может быть png-изображением или сделан с помощью css (https://css-tricks.com/examples/ShapesOfCSS/)

Если вы можете редактировать файл шаблона (я буду использовать изображение, которое у вас есть в качестве примера) вам нужно отредактировать шаблон php-файла и добавить стиль в таблицу стилей.

Вот небольшой образец.

.blue-section, .grey-section { 
 
    display:block; 
 
    position:relative; 
 
    min-height:200px; 
 
    } 
 

 
.blue-section { 
 
    background-color:blue; 
 
    } 
 

 
.grey-section { 
 
    background-color:#888; 
 
    } 
 

 
.triangle { 
 
    position:absolute; 
 
    bottom:-20px; 
 
    z-index:10; 
 
    left:50%; 
 
    transform: translate(-20px,0); 
 
\t width: 0; 
 
\t height: 0; 
 
\t border-left: 20px solid transparent; 
 
\t border-right: 20px solid transparent; 
 
\t 
 
\t border-top: 20px solid blue; 
 
}
<div class="blue-section"> 
 
    test 
 
    <div class="triangle"></div> 
 
    
 
</div> 
 

 
<div class="grey-section"> 
 

 
    test 
 
</div>

+0

Спасибо за уры любезной помощи. –