Mike_Ro
@Mike_Ro
Зеленая, зеленая трава...

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

Всем привет!

Сижу думаю, как грамотнее сверстать то, что на скрине ниже:
5a6f8aba1c3e0435559381.png

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

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

Спасибо!
  • Вопрос задан
  • 88 просмотров
Решения вопроса 1
Mike_Ro
@Mike_Ro
Зеленая, зеленая трава...
Решили вопрос так:

<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>


.container {
width:100%;
height:100%;
}
#rectFon{
fill:black;
}

#rightLine {
fill:#ffa896;
stroke-width:4;
stroke:#ffa896";
}
#leftLine{
fill:#ca432b;
stroke-width:4;
stroke:#ca432b;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@kulaeff
Front-end developer
Имхо, у вас и так и так есть файл (png или jpeg) с фоном, почему бы не добавить туда эти полоски. Зафиксировать можно с помощью background-position. Это то, что первое в голову пришло. Чтобы точно ответить, маловато вводных данных. Будут ли блоки, содержащие эти фоны меняться по высоте. Если будут, то насколько критично вертикальное выравнивание этих фонов. Может быть нужно не по низу, а по верху, или по центру.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы