Как грамотно сверстать подобные блоки?

300
31 января 2018, 12:28

Как грамотнее сверстать то, что на скрине ниже:

Подробности: 2 блока, у каждого блока свой bg, блоки разделены наклонными линиями (рыжая и бледно-рыжая). При сужение окна, пересечение линий должно оставаться в центре.

Что делать, сразу готовить bg изображения с резанным 'низом', или 'резать' низ через css, но тогда как зафиксировать полоски по низу этого 'резанного' bg?

Answer 1

Пример SVG

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1200 600" preserveAspectRatio="xMinYMin meet" > 
 
<rect id="rect6" width="100%" height="100%" fill="black" /> 
<path id="rightLine" d="M1197 261 600.25624 376.79371c0 0 0 21.41258-0.25624 23.20629l597-113z"  style="fill:#ffa896;stroke-width:4;stroke:#ffa896"/> 
<path id="leftLine" d="M0 261 661.53747 388.79371 598.97502 400.51249 0 287Z"  style="fill:#ca432b;stroke-width:4;stroke:#ca432b"/></svg>

Изображение адаптивно, соединение линий всегда находится в центре, пропорции сохраняются.

Добавлять svg можно инлайн или через background

Пример добавления инлайн SVG

Стили представления SVG (fill, strokeи другие) переносим в CSS/
Стили старайтесь определять один раз, не дублируйте. У svg сложная система иерархии. Обертываем svg - <div class="container">код svg</div>

Если необходима адаптивность задавайте размеры контейнеру в процентах. 

.container { 
width:100%; 
height:100%; 
} 
#rectFon{ 
fill:black; 
} 
 
#rightLine { 
fill:#ffa896; 
stroke-width:4; 
stroke:#ffa896"; 
} 
#leftLine{ 
fill:#ca432b; 
stroke-width:4; 
stroke:#ca432b; 
}
<div class="container"> 
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 1200 600" preserveAspectRatio="xMinYMin meet" > 
 
<rect id="rectFon" width="100%" height="100%"  /> 
<path id="rightLine" d="M1197 261 600.25624 376.79371c0 0 0 21.41258-0.25624 23.20629l597-113z"  /> 
<path id="leftLine" d="M0 261 661.53747 388.79371 598.97502 400.51249 0 287Z"/> 
</svg>   
 
</div>

READ ALSO
Как уменьшить нагрузку на базу данных?
MySQL

Как уменьшить нагрузку на базу данных?

Занимаюсь разработкой и поддержкой движка на Laravel для сервиса партнерских программТекущий трафик, который идёт на сервер порядка 30 миллионов...

 217
Выборочное обновление данных MySQL
MySQL

Выборочное обновление данных MySQL

Здравствуйте, есть у меня таблица где есть столбцы name cash update Мне нужно из этого следующее: Если update равен 1, то мы добавляем к каждому из записей...

 252
Удаление повторяющихся записей из БД MYSQL
MySQL

Удаление повторяющихся записей из БД MYSQL

Перевожу запросы с Access на MуSQL, на сколько понимаю, SELECT от DELETE отличается только самим словом SELECT/DELETE, так вот, в данном случае SELECT работает,...

 212
LINQ Добавить строку в каждые 5 позиций списка
c#

LINQ Добавить строку в каждые 5 позиций списка

Помогите переписать код с помощью Linq

 243