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

Question

freeman0204 @freeman0204

CSS

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

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

Вопрос задан более трёх лет назад
499 просмотров

Комментировать

Подписаться 2 Оценить Комментировать

Answer 1 · 2015-09-30 18:22:01

скос можно еще треугольниками (бордерами) делать.

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

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

Войдите на сайт