Собственно на картинке косая линия, как ее заверстать так чтобы адекватно смотрелось и десктопе и на мобильном
Ответ
1). Вступление.
Вы пишите:
Собственно на картинке косая линия, как ее заверстать так чтобы адекватно смотрелось и десктопе и на мобильном
Ответ:
Вначале важно разобраться, что значит «адекватно». В верстке, когда речь заходит про адаптивный дизайн, зачастую бывает два варианта:
У нас уже есть макет с дизайном для мобильной версии/планшета. Следовательно мы и делаем так как в данном макете. Может быть совершенно "неадекватно", но что делать, такой дизайн и нужно верстать.
У нас нет макета с дизайном для мобильной версии/планшета. И это остается на усмотрение верстальщика, т.е. на наше усмотрение. Предположим, что это наш вариант.
2). Реализация.
У нас не просто косая линия, а есть еще цветной бордюр, который нужно реализовать.
Если необходимо сделать просто косую линию, я могу порекомендовать данную статью, там описывается как сделать такую линию, многими способами.
Наш вариант, с бордюром, я сделал так(лучше смотреть, нажав на кнопку «На всю страницу»):
body {
overflow-x: hidden;
}
.section-one {
background-color: #5FC18B;
position: relative;
padding: 200px 0 350px;
}
.section-one .section-one__title {
color: #fff;
font-size: 35px;
margin-bottom: 30px;
text-align: center;
}
.section-one .section-one__descr {
color: #fff;
font-size: 16px;
line-height: 1.5;
max-width: 300px;
margin: 0 auto;
text-align: center;
}
.section-two {
background-color: #44a36f;
padding: 100px 0 200px;
position: relative;
z-index: 10;
}
.section-two .section-two__title {
color: #fff;
font-size: 35px;
margin-bottom: 30px;
text-align: center;
}
.section-two .section-two__descr {
color: #fff;
font-size: 16px;
line-height: 1.5;
max-width: 300px;
margin: 0 auto;
text-align: center;
}
/* -------------------------------------------------------------------------
begin Separator
* ------------------------------------------------------------------------- */
.separator {
bottom: -4px;
left: 0;
overflow: hidden;
position: absolute;
width: 100%;
}
/* -------------------------------------------------------------------------
end Separator
* ------------------------------------------------------------------------- */
Awesome Section - 1
Not far stuff she think the jokes. Going as by do known noise he wrote round leave. Warmly put branch people narrow see. Winding its waiting yet parlors married own feeling. Marry fruit do spite jokes an times. Whether at it unknown warrant herself winding if. Him same none name sake had post love. An busy feel form hand am up help. Parties it brother amongst an fortune of. Twenty behind wicket why age now itself ten.
Awesome Section - 2
From they fine john he give of rich he. They age and draw mrs like. Improving end distrusts may instantly was household applauded incommode. Why kept very ever home mrs. Considered sympathize ten uncommonly occasional assistance sufficient not. Letter of on become he tended active enable to. Vicinity relation sensible sociable surprise screened no up as.
В примерах используется normalize.css.
Все готово. Адаптивно, и поддержка IE-9+. Это довольно простой код на SVG, написан вручную.
Стоит отметить, что адаптивный дизайн зачастую разрабатывается для мобильных max-width: 320px (iphone-5). И смотря на наш блок, на данном разрешении, косая линия выглядит слишком косой :)
Поэтому, напишем медиа-запрос, для примера возьмем breakpoint bootstrap-3:
body { overflow-x: hidden; } .section-one { background-color: #5FC18B; position: relative; padding: 200px 0 350px; } .section-one .section-one__title { color: #fff; font-size: 35px; margin-bottom: 30px; text-align: center; } .section-one .section-one__descr { color: #fff; font-size: 16px; line-height: 1.5; max-width: 300px; margin: 0 auto; text-align: center; } .section-two { background-color: #44a36f; padding: 100px 0 200px; position: relative; z-index: 10; } .section-two .section-two__title { color: #fff; font-size: 35px; margin-bottom: 30px; text-align: center; } .section-two .section-two__descr { color: #fff; font-size: 16px; line-height: 1.5; max-width: 300px; margin: 0 auto; text-align: center; } /* ------------------------------------------------------------------------- begin Separator * ------------------------------------------------------------------------- */ .separator { bottom: -4px; left: 0; overflow: hidden; position: absolute; width: 100%; } /* ------------------------------------------------------------------------- end Separator * ------------------------------------------------------------------------- */ /* begin Media Max-Width 767 ============================================================================ */ @media screen and (max-width: 767px) { .section-one { padding: 130px 0 190px; } .separator { bottom: -110px; } .separator .separator__svg { left: -20%; position: relative; -webkit-transform: rotate(15deg); transform: rotate(15deg); width: 140%; } } /* end Media Max-Width 767 ============================================================================ */
Awesome Section - 1
Not far stuff she think the jokes. Going as by do known noise he wrote round leave. Warmly put branch people narrow see. Winding its waiting yet parlors married own feeling. Marry fruit do spite jokes an times. Whether at it unknown warrant herself winding if. Him same none name sake had post love. An busy feel form hand am up help. Parties it brother amongst an fortune of. Twenty behind wicket why age now itself ten.
Awesome Section - 2
From they fine john he give of rich he. They age and draw mrs like. Improving end distrusts may instantly was household applauded incommode. Why kept very ever home mrs. Considered sympathize ten uncommonly occasional assistance sufficient not. Letter of on become he tended active enable to. Vicinity relation sensible sociable surprise screened no up as.
Здесь я использую один трюк из той статьи, которую рекомендовал выше. Смотреть на Codepen
3). Заключение:
В заключении порекомендую изучать SVG. Это проще, чем кажется. Отличное пошаговое руководство: https://developer.mozilla.org/...
Комментариев нет:
Отправить комментарий