shawn allison

<div class="triangle basic"></div>

.triangle {
  width:                    0;
  height:                   0;
  
  border-bottom:            0;
}

  .triangle.basic {
    border-top:             40px solid red; 
    border-left:            25px solid transparent;
    border-right:           25px solid transparent;           
    
    /* IE6 specific hacks. See notes below. */
    _border-left-color:     black;
    _border-right-color:    black;
   
    _filter:                chroma(color=black);
  }

Internet Explorer Bugs and Fixes

Internet Explorer 6 does not comprehend setting a border colour to transparent. It seems to instead treat transparent as being equal to inherit, with the result being your left and right borders being the colour set in the body declaration of your css file.

Tervel Peykov has an article, Emulating border-color: transparent in Internet Explorer 6, which explains how IE6 can be "hacked" to display transparent borders using the propriatary filter attribute in css.

As noted in the article, the thing to be careful of when applying the filter is to make sure to choose a colour that is not applied or nested anywhere inside the parent you're applying it to.

For example, if your default font colour is black then set the filter in the css to something like pink or orange, or else your black text may vanish!

<div class="triangle basic outer">
  <div class="triangle basic inner"></div>
</div>

.triangle.outer {
  position:           relative;
}

.triangle.inner {
  position:           absolute;
}

  .triangle.inner.basic {
    border-left:      24px solid transparent;
    border-right:     24px solid transparent;
    
    top:              39px solid yellow;
    bottom:           1px;  
    left:             -24px; 
  }

Internet Explorer Bugs and Fixes

Flat out, overlaying two polygons on top of each will just not work in Internet Explorer 6. Applying the filter attribute to the inner triangle has the weird result of making the triangle below basically invisible.

There really isn't a good workaround to fix this, so the best suggestion would be not to use this technique and instead use the tried and tested method of using a background image.