Rotation of a div gives a black background on IE, how can I remove it?


Tags: html,css3

Problem :

I am using this css class to rotate a div. This isn't currently working, because it gives a black background on IE9. How do I remove this?

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 70px solid transparent;
  border-bottom: 70px solid transparent;
  position:absolute;
  top:-45px;
  left:-11px;
  z-index:1;
  border-right:70px solid #009da6;
  -webkit-transform: rotate(45deg); 
  -moz-transform: rotate(45deg);  
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5); /*for IE8*/
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

Before

Before Rotation

After

After Rotation



Solution :

I corrected this just by removing the filter line. My code is now:

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 70px solid transparent;
  border-bottom: 70px solid transparent;
  position:absolute;
  top:-45px;
  left:-11px;
  z-index:1;
  border-right:70px solid #009da6;
  -webkit-transform: rotate(45deg); 
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

    CSS Howto..

    Google Chrome unresponsive on simple CSS page - how to fix?

    How to set numerous links in a single line with CSS?

    How to concatenate icons into a single image with ImageMagick?

    How to prevent default title behavior with CSS or JavaScript [duplicate]

    Hiding the content of a
    and showing another
    with different contents

    How do I select text after a

    tag, but before a nested tag?

    How to target the chrome browser for Mac only?

    How to add bold text with CSS? [duplicate]

    How to make nav menu fall onto the page?

    How to keep button active after press with jQuery

    how to make the parent width equals the width of all element inside it?

    How to write print css to get print from web pages in almost same manner as we get from MS word?

    How can I align two icons on my webpage next to each other?

    How to change css content hover effect background color css php in this situation?

    CSS horizontal scroller, how to position “below” before “right”?

    Jquery: show IMG on click

    Finding correct CSS sheet when Chrome Inspector shows (index) [closed]

    How to make margins collapse evenly?

    CSS: how to make two sections at the same line?

    How Do I Limit Scrolling to a Fixed Div?

    how do i place text opposite to Anchor Tag Using CSS [closed]

    How to make all cross browser compatible skewed div edges?

    How can I add a gradient overlay to an image that is set in a style attribute in css?

    how to use static folder in django for css and javascript?

    How to handle long string where characters stick together

    HTML/CSS: how to expand a table row i only one direction?

    How to prevent HTML element moving when resizing window?

    In CSS, how to toggle the tab color if it was selected (without using javascript)

    How to create CSS for round, responsive, bootstrap button with border? Border is affecting pixels

    how to load multiple lazy css load file