Boxes with angled bottom and top

Question

I would like to know how can I make in CSS3 angled boxes. Like this site: http://themeluxe.com/themes/glissando/ (the whites ones)

And how can I make the borders look better, smooth.

Looking on their code, I found this css:

.container:before, .container:after {
    border-bottom: 80px solid transparent;
    border-left: 110vw solid transparent;
    content: "";
    display: none;
    height: 0;
    margin-top: -80px;
    position: relative;
    width: 0;
}

But is not working for me.

Another nice template with angled borders http://parasponsive.com/para4/ — ccquir, Jul 23 '14 at 16:25

score 1 · Accepted Answer · edited May 23 '17 at 10:33

In the website you link to they use the "border technique" to create the oblique boxes on pseudo elements you may understand this technique in this SO question.

Here is a simple fiddle using this technique to create the oblique bottom and top. It should help you understand how it works :

DEMO

HTML :

<div></div>
<div class="second"></div>

CSS :

body{
    margin:0;
    padding:0;
}
div{
    height:200px;
    background:teal;
    position:relative;
}
.second{
    background:gold;
}

.second:before{
    content:'';
    position:absolute;
    bottom:100%;
    border-left:100vw solid transparent;
    border-bottom: 80px solid gold;
}

You should also be aware that in the website you link to, they are using vw units. They are not supported by IE8-

Thank you so much! I will check the link! Really appreciate it! — ccquir, Jul 23 '14 at 18:24

Boxes with angled bottom and top

1 Answers1