I'm looking to "cut" the top left corner of a div, like if you had folded the corner of a page down.
I'd like to do it in pure CSS, are there any methods?
If the parent element has a solid color background, you can use pseudo-elements to create the effect:
div {
height: 300px;
background: red;
position: relative;
}
div:before {
content: '';
position: absolute;
top: 0; right: 0;
border-top: 80px solid white;
border-left: 80px solid red;
width: 0;
}
<div></div>
P.S. The upcoming border-corner-shape
is exactly what you're looking for. Too bad it might get cut out of the spec, and never make it into any browsers in the wild :(