How to create a slanting border with css


Tags: html,css,html5,css3,transform

Problem :

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/



Solution :

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/


    CSS Howto..

    how should i set scrollbar properties in css

    How to hover mutiple “div” in the same time?

    How do i place 4 headers from 1 div next to each other?

    How to avoid the pain of CSS multi-browser compatibility?

    Show/Hide images based on tab selection

    How to make attractive dropdown menu using css3? [closed]

    How i can match multiple CSS selectors

    How to set background texture to 50% of the page in css

    How to extend width and height automatically when the data gets increased

    How to define a CSS fontface?

    How can I change the ckeditor iframe CSS styling

    How to align div elements while using css tables

    How do you align text of one item in nav?

    How to style a selected radio button AND include space as clickable?

    How to include css files into compojure project?

    How to stick footer to bottom (not fixed) even with scrolling

    How can I make clickable list with sublinks ?

    How to change the scrollbar color using css [duplicate]

    How to set a css class to an array of tags on mouse hover in Javascript?

    How to apply css class to a based on respective $value in a of that row in a repeat region

    How I can apply css to part of my jQuery result?

    How to adjust the position of specific elements/items/content on a page with CSS

    Show div on button click with multiple divs

    Box-shadow is overlapping other elements, how can I fix it?

    How do I use CSS to keep multiple images relatively sized withing the same outer element?

    How to use Bootstrap3 media queries for custom CSS? [closed]

    how to apply stylesheet to wp frontend, via plugin i created?

    How to import a css file in a react component?

    Jquery hide / show div but to keep toggle link from “hiding” too

    How to remove critical CSS from the main.css file