Cut Corners using CSS

Question

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?

Answer 1

Here's a solution for if you don't want a solid-color background, i.e. just a border with square-cut corners.

.container {
  width: 100px;
  height: 100px;
  background-color: white;
  border: 1px solid black;
  position: relative;
}

.border {
      position: absolute;
      width: 100%;
      height: 100%;
}
.border:before {
        content: '';
        position: absolute;
        border-top: 15px solid white;
        border-left: 15px solid white;
        width: 0;
      }
  
.border:after {
        content: '';
        position: absolute;
        width: 16px;
        height: 1px;
        background: black;
      }
 
.tl:before { top: -5px; left: -5px; transform: rotate(-45deg); }
.tl:after { top: 5px; left: -3px; transform: rotate(-45deg);}

.tr:before { top: -5px; right: -5px; transform: rotate(45deg); }
.tr:after { top: 5px; right: -3px; transform: rotate(45deg); }

.bl:before { bottom: -5px; left: -5px; transform: rotate(45deg); }
.bl:after { bottom: 5px; left: -3px; transform: rotate(45deg); }

.br:before { bottom: -5px; right: -5px; transform: rotate(-45deg); }
.br:after { bottom: 5px; right: -3px; transform: rotate(-45deg); }