@freeman0204

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

Есть вот такой шаблон, на вид очень простой
screenshot.ru/3e46181455579fed944d9ef20cfab7fe
Как сверстать эти "косые блоки"? Это div c фоновой картинкой или это фон на чистом css?
Так же силуэт города, это svg которой идет фоном div?
И вертикальная полоса это картинка? Или бордер с кругами на чистом css?
И еще вопрос по js часто бывает на таких сайтах когда опускаешься ниже то элементы вылетают с лева и справа к центру (анимированные). Это какой то готовый кусок кода типа как слайдеры, который можно вставить в свой код и подстроить под себя? Или это все с нуля обычно пишется?
  • Вопрос задан
  • 498 просмотров
Решения вопроса 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 и все
Ответ написан
Скос, допустим, так
Силуэт города - это точно png
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы