Pure CSS fold-down corner with transparent background

CSS

ul,
li {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    display: block;
    height: 110px;
    position: relative;
    width: 136px;
}
li:after,
li:before {
    background: blue;
    content: "";
    display: block;
    position: absolute;
}
li:after {
    height: 110px;
    right: 0;
    top: 0;
    width: 116px;
}
li:before {
    height: 90px;
    left: 0;
    top: 20px;
    width: 20px;
}

li a {
    color: #fff;
    display: table-cell;
    height: 110px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 136px;
    z-index: 100;
}
li a:after {
    border-color: blue;
    border-style: solid;
    border-width: 20px 20px 0 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    top: 0;
    z-index: 1;
}
li a:hover:after { border-color: transparent red }

.lt-ie8 li {
	
}
.lt-ie8 li a {
	background: blue;
	display: block;
}

HTML

<ul>
	<li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a></li>
</ul>

Creates a box with a fold-down corner (on hover in this instance) where the fold-down is transparent.

Works in Safari, FF, Chrome and IE8+