How to make a right angled triangular cut on a div? [duplicate]

Question

This is the result I want:

I am using borders like:

border: 10px blue solid;
border-right: 10px white solid;

but it just makes a trapezium like shape on the right side. Is there any way to achieve what I want in pure CSS? The div itself might contain some other DOM elements like p, h1-h6 or some other divs.

Answer 1

It's simple. Just use following css:

.shape {
    border-top: 100px solid blue;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}

<div class="shape"></div>

Edit:

Following will work if there is another element inside it.

.shape {
    background: blue;
    height: 100px;
    position: relative;
    width: 150px;
  color:white;
}
.shape::before {
    background: blue none repeat scroll 0 0;
    content: "";
    height: 100px;
    position: absolute;
    right: -25px;
    transform: skew(-20deg);
    width: 50px;
}

<div class="shape">
 <span>Hello</span> 
 <div> Test message </div>
</div>