CSS folded corner effect transparent background

Answer 1

Css span

Using an span (.fold) element i create a extra border to the right of the div.
Then i added pseudo classes to the .fold so that there is a darker blur on the corner element.

body {
  margin: 20px;
}
.fold {
  position: absolute;
  top: 15px;
  right: -15px;
  width: 15px;
  height: calc(100% - 15px);
  background-color: inherit;
}
.fold::before {
  content: "";
  position: absolute;
  top: -15px;
  border-top: 15px solid transparent;
  border-left: 15px solid firebrick;
}
.fold::after {
  content: "";
  position: absolute;
  top: -15px;
  border-top: 15px solid transparent;
  border-left: 15px solid black;
  opacity: 0.5;
}
.note {
  background-color: firebrick;
  padding: 25px;
  position: relative;
  width: 400px;
}

  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia lorem vel purus scelerisque tincidunt. Nulla semper magna eget mauris semper, vel viverra urna lacinia. Maecenas feugiat molestie ante a faucibus. Donec mollis pulvinar nisi, pretium
  ullamcorper dui molestie lacinia. Quisque arcu massa, sollicitudin nec magna quis, tempus pulvinar est. Integer non consectetur quam. Sed nulla quam, luctus ut elit sit amet, sagittis condimentum nisi. In quis ipsum tellus. Proin in imperdiet felis.
  Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer venenatis, nunc non congue pellentesque, diam enim consectetur libero, vitae fermentum lectus risus vitae ligula. Donec tristique sollicitudin mi quis condimentum.
  In eget diam viverra, elementum nisi vitae, euismod elit. Nulla facilisi. Nullam et odio efficitur, rutrum orci sit amet, convallis ante. Nulla metus lorem, euismod non ante mollis, facilisis egestas arcu. Sed arcu tortor, lacinia a nibh sed, laoreet
  iaculis arcu. Quisque vel lacus ut felis ornare molestie a eget purus. Cras est elit, euismod sit amet magna ut, cursus auctor erat. Proin eu ante lorem.

Css clip-path

This solution uses clip-path to create the corner cutoff. I added a pseudo element that is the same height and with as the cutout.
Then i used a new clip path on the pseudo element to create the fold (not a rectangle the default shape)
This element has a background color black, and set its opacity to 0.5 to get a darker color of the original background.

.note {
  width: 300px;
  padding: 10%;
  background-color: cornflowerblue;
  -webkit-clip-path: polygon(0 0, 90% 0, 100% 10%, 100% 100%, 0 100%);
  -moz-clip-path: polygon(0 0, 90% 0, 100% 10%, 100% 100%, 0 100%);
  -ms-clip-path: polygon(0 0, 90% 0, 100% 10%, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 90% 0, 100% 10%, 100% 100%, 0 100%);
  position: relative;
}
.note::before {
  content: "";
  position: absolute;
  width: 10%;
  height: 10%;
  -webkit-clip-path: polygon(0,0 100% 100%, 0 100%);
  -moz-clip-path: polygon(0,0 100% 100%, 0 100%);
  -ms-clip-path: polygon(0,0 100% 100%, 0 100%);
  clip-path: polygon(0,0 100% 100%, 0 100%);
  background-color: black;
  opacity: 0.5;
  right: 0;
  top: 0;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia lorem vel purus scelerisque tincidunt. Nulla semper magna eget mauris semper, vel viverra urna lacinia. Maecenas feugiat molestie ante a faucibus. Donec mollis pulvinar nisi, pretium ullamcorper dui molestie lacinia. Quisque arcu massa, sollicitudin nec magna quis, tempus pulvinar est. Integer non consectetur quam. Sed nulla quam, luctus ut elit sit amet, sagittis condimentum nisi.

In quis ipsum tellus. Proin in imperdiet felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer venenatis, nunc non congue pellentesque, diam enim consectetur libero, vitae fermentum lectus risus vitae ligula. Donec tristique sollicitudin mi quis condimentum. In eget diam viverra, elementum nisi vitae, euismod elit. Nulla facilisi. Nullam et odio efficitur, rutrum orci sit amet, convallis ante. Nulla metus lorem, euismod non ante mollis, facilisis egestas arcu. Sed arcu tortor, lacinia a nibh sed, laoreet iaculis arcu. Quisque vel lacus ut felis ornare molestie a eget purus. Cras est elit, euismod sit amet magna ut, cursus auctor erat. Proin eu ante lorem.