CODEWITHSUNDEEP
htmlcsscss-shapes
ccquir
ccquir

Reputation: 37

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.

Upvotes: 1

Views: 1143

Answers (1)

web-tiki
web-tiki

Reputation: 103790

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-

Upvotes: 1

Related Questions