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..

    How to Assemble HTML,CSS and JS with EachOther

    How to serve css files in djangos's flatpages?

    How do you make a CSS-defined table-cell scroll?

    How can I get rid of these shadows on my text in Internet Explorer?

    How can I remove the underline of a linked image in Firefox and Chrome?

    How to control css of images on top of a full page semi-transparent overlay div

    How to prevent outside CSS from overriding web component styles

    How do I use the Bootstrap form select css with a Rails model?

    how can a media query detect a full-hd smartphone?

    How to control a

    How can I add a css property to the first div with a specific class name?

    how to remove margin or padding of window in javascript/css?

    Learn how to arrange elements correctly using CSS [closed]

    How can I align multiple lists in the same row?

    css: How to horizontal align fonts with different sizes

    xHTML/CSS: How to make inner div get 100% width minus another div width

    How to get width of div using jquery

    How to place the text after thumbnails at the bottom?

    Codeigniter--add “active” css class to link, how to?

    How do I change the border lines COLOUR on the table view

    How can I anticipate which type of CSS selector will work?

    How to make a div grow with its children when inline-blocks don't fit anymore

    How to make div inside table same size as text inside a?

    How can I center vertically a div in bootstrap?

    How to change my online store template in dbdirector ecommerce platform

    How to create a row of three expandable/collapsible divs which react on hover?

    How to distribute floated elements evenly with a dynamic column and row count in CSS?

    How to use preloaded CSS spritesheet in javascript?

    How to check a css propert is supported?

    How to make changeable themes using css and javascript