Slanted Corner on CSS box

Question

I have been playing with CSS for only a short time and am trying to have a normal box but with the top left hand corner cut off at a 45 degree angle. Not a small amount eith

Answer 1

This can be done using svg clip-path.

Advantages:

1. Work with a regular div
2. No hacky borders to create shapes
3. Do not apply any rotation so that you can easily do it on non uniform background
4. Does not add any div element through CSS so that you can still work with the regular div background (in case you have code modifying it for example!)

The following CSS will shape the div with the bottom right corner cut off so that you can put any background:

-webkit-clip-path: polygon(100% 0, 100% 65%, 54% 100%, 0 100%, 0 0);
clip-path: polygon(100% 0, 100% 65%, 54% 100%, 0 100%, 0 0);

There are multiple SVG generators online:

• http://bennettfeely.com/clippy/
• http://cssplant.com/clip-path-generator

Support:

• Firefox: 3.5+
• Chrome: 24+
• Safari: 7+
• Opera: 15+
• Edge: 76+
• IE: None

Check https://caniuse.com/#feat=css-clip-path