Paper folded effect not working in IE8


I was working on folded paper effect and this seems to work on almost all browsers except IE8.

Here is the JSBIN code :

enter image description here

I saw a different question on SOF where :before and :after tags are supported, but I guess I am missing something here. Can someone point that out to me?


enter image description here

Problem courtesy of: bragboy


It is working, you are having problems with Z-INDEX, and I changed the top and left to -1.

  padding-left: 30px;

.complaint:after {
  border-color: transparent #F58C1E #F58C1E   transparent;
  border-style: solid;
  border-width: 10px;
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  z-index: 12;

.complaint:before {
  border-color: white #A65807 #A65807 white;
  border-style: solid;
  border-width: 11px;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
  content: "";
  left: -1px;
  position: absolute;
  top: -1px;
  width: 0;
  z-index: 11;

.complaint {
  background-color: #F58C1E;
  border-style: solid;
  border-width: 1px 1px 0;
  padding: 4px;
  position: relative;


enter image description here

Solution courtesy of: Ignacio Correia


I believe that box-shadow is not supported in IE8, so the shadow under the 'fold' will not appear.

Discussion courtesy of: Paulie_D

This recipe can be found in it's original form on Stack Over Flow.