3

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

введите сюда описание изображения

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

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

9
  • может просто фоном, а у фона есть настройка для центрирования 29 янв 2018 в 21:09
  • лучши вариант svg
    – Air
    29 янв 2018 в 21:09
  • можно легко css clip-path но учти в EDGE & IE не будет рабатать
    – Air
    29 янв 2018 в 21:11
  • >лучши вариант svg - а можно наглядный пример? 29 янв 2018 в 21:18
  • >можно легко css clip-path но учти в EDGE & IE не будет рабатать - а вот это не совсем годится... 29 янв 2018 в 21:18

1 ответ 1

7

Пример 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>

1
  • 2
    Конечно! Благодарю, очень помогли! 31 янв 2018 в 10:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.