Aspect Ratio Div

Question

I am trying to create headings with slanted edges that maintain their aspect ratio no matter what height they appear. Is it possible to execute only one CSS?

This image shows what the headers look like if they are just one line:

And if they consist of two or more lines, they should look like this:

The problem I am facing is that I can’t get the white polygon to overlay the right side of the header to resize, not to mention resize with the same aspect ratio. Here, what happens on several lines of as-is:

Code for displaying headers right now:

HTML:

<header>
    <nav>
        <ul>
            <li><a href="#">Public Information</a></li>
        </ul>
    </nav>
    <h1>Board Meeting Schedule</h1>
</header>

CSS

* {
    font-family: sans-serif;
    font-size: 16px;
    font-weight: normal;
    line-height: normal;
    margin: 0;
}

header {
    background: #0D3C5B;
    display: inline-block;
    overflow: hidden;
    padding: 18px 80px 12px 20px;
    position: relative;
}
    header:before {
        border-left: 58px solid transparent;
        border-top: 62px solid #FFF;
        content: "\0020";
        display: block;
        height: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 0;
    }

    header nav {
        float: left;
        margin: 0 6px 0 0;
    }

        header nav ul {
            color: #42AFE3;
            display: inline-block;
            font-size: 0.75em;
            font-weight: bold;
            line-height: 1.6666666666666666666666666666667em;
            line-height: 2.25em;
            list-style: normal;
            margin: 0;
            padding: 0;
            text-transform: uppercase;
        }

            header nav ul li {
                display: inline-block;
            }

                header nav ul li a {
                    color: #42AFE3;
                    text-decoration: none;
                }

                header nav ul li:after {
                    content: "\003E";
                    padding: 0 4px;
                }

    header h1 {
        color: #FFF;
        float: left;
        font-size: 1.25em;
        font-weight: bold;
        line-height: 1em;
        text-transform: uppercase;
    }

    header:after {
        clear: both;
        content: "\0020";
        display: block;
        visibility: hidden;
    }

And here is the fiddle: http://jsfiddle.net/doLuj6me/

Answer 1

! , , , , .

, CSS3 .

:

CSS

header {
    background: #0D3C5B;
    display: inline-block;
    overflow: hidden;
    padding: 18px 80px 12px 20px;
    position: relative;
}

header:before {
    content:'';
    transform:rotate(45deg);
    transform-origin: bottom right;
    height: 100%;
    width: 100%;
    background-color: white;
    position: absolute;
    right: 0;
}

. , 45º , .

,

Voila.

Answer 2

: absolute; : 0; : 0; , , . , div : , div:)

... , . div div. : div, .

Answer 3

, :

http://jsfiddle.net/ryanwheale/twxgnjcw/

DIV, , DIV.

div {
    height: 400px;
    background: blue;
    position: relative;
    overflow: hidden;
}

div:after {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    left: 100%;
    bottom: -2000px;
    margin-left: -2000px;
    border-width: 2000px;
    border-style: solid;
    border-color: white transparent transparent;
}

Answer 4

Christopher was on the right track. All you have to do is position yours header:beforein the lower right corner and give your borders more dimensions than you need:

header:before { 
    content: " ";
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    height: 0;
    width: 0;
    border-left: 400px solid transparent;
    border-top: 400px solid #FFF;
}

Browse Fiddle . (updated link for some households)