Sloping/inclined header

Question

Can't understand how to make this trick or this with css. I mean the header and the flag. The line is not straight. They are inclined/sloping bordered. Could you, please, give an example or just exmplain this works?

Answer 1

Have a look at https://jsfiddle.net/josedvq/3HG6d/

HTML

<div class="triangle-up-left"></div>

CSS

.triangle-up-left {
    width: 0;
    height: 0;
    padding-bottom: 10%;
    padding-left: 10%;
    overflow: hidden;
}
.triangle-up-left:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left: -500px;
    border-bottom: 500px solid transparent;
    border-left: 500px solid #4679BD;
}

They use a trick where you make some borders transparent in order to create a triangle. More information about this technique at How do CSS triangles work?