hackerz10001
New Member
I am working on a project where I have created arrow ends on a navbar. The problem is transforms don't work on IE8 or below, so I wanted to implement the filter css for IE to make it behave, however, I can't get it to function properly. The object doesn't rotate 45 like the matrix is telling it to. I don't know if there is something else in the code preventing it from rotating or what. I would appreciate any feedback concerning how to fix this problem. \[code\].navbar .nav > li > a:before { background: #3b679e; background: linear-gradient(left top, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); background: -moz-linear-gradient(left top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); background: -webkit-linear-gradient(left top, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); background: -o-linear-gradient(left top, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); background: -ms-linear-gradient(left top, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); border-top:1px solid white; border-right:1px solid white; border-radius:0 8px 0 0; content: ' '; filterrogidXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand'); height: 27px; margin-left:-34px; position: absolute; top:0; -webkit-transform: rotate(45deg); -webkit-transform-origin: 0 0; -moz-transform: rotate(45deg); -moz-transform-origin: 0 0; -o-transform: rotate(45deg); -o-transform-origin: 0 0; -ms-transform: rotate(45deg); -ms-transform-origin: 0 0; -sand-transform:rotate(45deg); transform: rotate(45deg); transform-origin: 0 0; width: 28px;}\[/code\]I have tried to use the polyfills of transformie and cssSandpaper and they don't work on correcting this either. The rotate is applied on the .navbar .nav > li > a:before rule. http://jsfiddle.net/rsxavior/sTP5F/2/