Cutout Corners

.cutout-corner {
  width: 100px;
  height: 100px;
  background: #A9E4EF;
  background: linear-gradient(-45deg, transparent 15px, #A9E4EF 0);
}

Gradients can accept angle direction & colour stop positions in absolute lengths

.cutout-corners {
  width: 100px;
  height: 100px;
  background: #A9E4EF;
  background:
      linear-gradient(135deg, transparent 15px, #A9E4EF 0) top left,
      linear-gradient(-135deg, transparent 15px, #A9E4EF 0) top right,
      linear-gradient(-45deg, transparent 15px, #A9E4EF 0) bottom right,
      linear-gradient(45deg, transparent 15px, #A9E4EF 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

All four corners using linear-gradients with appropriate degree angles, transparent colour stops and position

Curved corners using radial-gradient + transparent circles at each corner

.curved-cutout-corners {
  width: 200px;
  height: 100px;
  background: #8E8DBE;
  background:
      radial-gradient(circle at top left, transparent 15px, #8E8DBE 0) top left,
      radial-gradient(circle at top right, transparent 15px, #8E8DBE 0) top right,
      radial-gradient(circle at bottom right, transparent 15px, #8E8DBE 0) bottom right,
      radial-gradient(circle at bottom left, transparent 15px, #8E8DBE 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

CSS Backgrounds & Borders Level 4 will bring 'corner-shape'