How to make such a layout?

F

freeman02042015-09-30 17:58:17

css

freeman0204, 2015-09-30 17:58:17

There is such a template, it looks very simple
screenshot.ru/3e46181455579fed944d9ef20cfab7fe
How to lay out these "oblique blocks"? Is it a div with a background image or is it a pure css background?
Also the silhouette of the city, is that the svg that goes with the background div?
And the vertical bar is a picture? Or a border with circles in pure css?
And another question about js often happens on such sites when you go down, the elements fly out from the left and right to the center (animated). Is it some kind of ready-made piece of code like sliders that you can insert into your code and customize for yourself? Or is it all written from scratch?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

E

Evgeny Kornachev, 2015-09-30
@freeman0204

bevel can still be done with triangles (borders).

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