Search code examples
htmlcsscss-shapes

Boxes with angled bottom and top

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.

Solution

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