Slanted border using CSS [duplicate]

How could I style a div to like the below image?

3 Answers

You can use half triangle with the pseudo element.

.container { padding: 20px; background-color: #F8F8F8; max-width: 200px; } .rectangle { width: 200px; height: 100px; background-color: #003781; position: relative; } .rectangle:after { content: ''; position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 25px 25px; border-color: transparent transparent #F8F8F8 transparent; }

<div> <div></div> </div>

Jsfiddle

Try this:

HTML

<div></div> <div></div>

CSS

.main { width: 300px; height: 200px; background-color: blue; } .cornered { width: 260px; height: 0px; border-top: 40px solid blue; border-right: 40px solid white; }

You will have 2 divs like:

Div main

Div cornered

Check it out.

You can use the pseudo element with a rectangle:

CSS:

<style media="screen" type="text/css"> #rectangle{ width: 200px; height: 100px; background: #ac60ec; position: relative; } #rectangle:after { content: ""; width: 171px; height: 0; position: absolute; bottom: 0; left: 0; border-top: 29px solid #ac60ec; border-right: 29px solid #ffffff; } </style>

HTML:

<div></div>

Code snippet:

#rectangle { width: 200px; height: 100px; background: #ac60ec; position: relative; } #rectangle:after { content: ""; width: 171px; height: 0; position: absolute; bottom: 0; left: 0; border-top: 29px solid #ac60ec; border-right: 29px solid #ffffff; }