html - set css border to end in a 90 instead of a 45 degree angle

Question

I have a div with different colors for both the border-bottom and border-right properties. So they are separated via a line leaving the box in a 45 degree angle.

How can I make the bottom-border shorter so that the right border goes all the way to the bottom of the element which would yield a 90 degree angle separator-line?

Answer 1

You can do this with box-shadow.

Demo:

Output:

CSS:

#borders {
    border-bottom: 20px solid black;  
    box-shadow: 20px 0 0 0 red;
    height: 150px;
    margin: 30px;
    width: 150px;

}

HTML:

<div id="borders"></div>