Задать вопрос
@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
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
Trainee - IT Support
move2usajobs LLC • Лос-Анджелес
от 2 000 до 4 000 $
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать нативное мобильное приложение на Swift и Kotlin
24 нояб. 2024, в 22:14
250000 руб./за проект
Маркетплейс в МЕДИЦИНСКОЙ тематике
24 нояб. 2024, в 21:55
200000 руб./за проект
Нужно подобие hamster combat
24 нояб. 2024, в 21:41
1000 руб./за проект
Ещё заказы