Задать вопрос
@freeman0204
css

Как сверстать такой макет?

Есть вот такой шаблон, на вид очень простой
screenshot.ru/3e46181455579fed944d9ef20cfab7fe
Как сверстать эти "косые блоки"? Это div c фоновой картинкой или это фон на чистом css?
Так же силуэт города, это svg которой идет фоном div?
И вертикальная полоса это картинка? Или бордер с кругами на чистом css?
И еще вопрос по js часто бывает на таких сайтах когда опускаешься ниже то элементы вылетают с лева и справа к центру (анимированные). Это какой то готовый кусок кода типа как слайдеры, который можно вставить в свой код и подстроить под себя? Или это все с нуля обычно пишется?
  • Вопрос задан
  • 499 просмотров
Комментировать
Подписаться 2 Оценить Комментировать
Решения вопроса 5
@zelan
Кратко обо мне не получится.
скос можно еще треугольниками (бордерами) делать.

<body>
    
    <div class='square-top'></div>
    <div class='triangle-border'></div> 
    <div class='square-bottom'></div>
</body>


body{
    width:500px;
    margin: 0 auto;
    background-color: red;
}

.square-top{
    background-color:white;
    height:100px;  
}

.triangle-border{
     
    border-left: 250px solid blue;
    border-right: 250px solid green;
    border-top: 20px solid blue;
    border-bottom: 20px solid green;
}

.square-bottom{  
    background-color:black;
    height:100px  
}
Ответ написан
Комментировать
Комментировать
In4in
@In4in
°•× JavaScript Developer ^_^ ו°
Можно через псевдоэлементы, можно фоновой картинкой или SVG.
Ответ написан
Комментировать
Комментировать
@ps1panda
Верстальщик, начинающий front-end
просто то что белым фоном это png с прозрачностью.
То есть идет три блока:
1 верхний с линией
2 с белым фоном
3 все что ниже

Вертикальная полоса это скорее всего css
Ответ написан
Комментировать
Комментировать
Ivanq
@Ivanq
Знаю php, js, html, css
1) лучше на css
2) svg
3) лучше с помощью css
4) пишут пару строк кода на jQuery и все
Ответ написан
3 комментария
3 комментария
@mydearfriend
Скос, допустим, так
Силуэт города - это точно png
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Frontend React
Glob-com
от 100 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработка индикатора
25 апр. 2024, в 14:05
2000 руб./за проект
Разработать дизайн карточки для маркетплейсов
25 апр. 2024, в 14:01
3000 руб./за проект
Веб-приложения "Афиша" и "Бронирование":
25 апр. 2024, в 13:59
20000 руб./за проект
Ещё заказы