CODEWITHSUNDEEP
htmlcsstransform
Filip Nilsson
Filip Nilsson

Reputation: 407

How to create a slanting border with css

I want to cut my border as the image below displays:

enter image description here

They areas that are cut away should be transparent if possible.

This is my code at the moment:

.main {
    height: 50px;
    background-color: #d6d6d6;
}

footer {
    height: 93px;
    background-color: #ff6138;
    position: relative;
}

.footer-info {
    position: absolute;
    bottom: 27px;
    left: 33px;
}

footer span {
    color: #ffff9d;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.05em;
    font-size: 1.1875em;
}

footer .tel {
    color: #fff;
    font-weight: 400;
    font-size: 1em;
    margin-left: 24px;
}

body {
    background-color: #ff9200;
}

Link to code http://jsfiddle.net/NpX23/

Upvotes: 1

Views: 385

Answers (3)

Näbil Y
Näbil Y

Reputation: 1650

Using :before/:after and rotate.

Add position:relative to .main and footer.

.main:after, footer:before {
    content: " ";
    width: 100%;
    height: 40px;
    background: inherit;
    position: absolute;
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    -o-transform: rotate(-1deg);
    -ms-transform: rotate(-1deg);
    transform: rotate(-1deg);
    z-index: -1;
}

.main:after {
    bottom: -20px;
}

footer:before {
    top: -20px;
}

Working: http://jsfiddle.net/NpX23/8/

Upvotes: 5

Albzi
Albzi

Reputation: 15609

Here is something using the :before attribute without rotate:

JSFiddle

footer::before{
    content:' ';
    position:absolute;
    top:-25px;
    left:0;
    width: 0;
    height: 10px;
    border-top: 25px solid transparent;
    border-right: 1800px solid #ff9200;
}

And I put overflow-x:hidden; in body.

Upvotes: 2

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Used to Rotate property css3 as like this 

.main {
    height: 50px;
    background-color: #d6d6d6;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

footer {
    height: 93px;
    background-color: #ff6138;
    position: relative;
    margin-top:20px;
        -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

Demo

Upvotes: 0

Related Questions