Firefox and Opera rendering border incorrectly

Question

I have created a circular menu using trapezoids made with pure CSS, but when I rotate them, Firefox shows a line in both sides and, on Opera, all trapezoids have a weird background/border-color, kind of transparent. The trapezoids look like this.

.trapezoid {
  width: 100px;  height: 0px;
  margin: 55px auto 0 auto;
  border-bottom: 140px solid black;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  transition: rotate (100deg);
}

Chrome and IE9 are OK. How can I find a way to fix this?

Answer 1

You'll want to use -moz for Firefox; -o for Opera. Those are the extensions to correctly format within those browsers. A great site for shapes here.

.trapezoid 
{ 
        border-bottom: 100px solid red; 
        border-left: 50px solid transparent; 
        border-right: 50px solid transparent; 
        height: 0; 
        width: 100px; 
        transform:rotate(180deg);
        -moz-transform:rotate(180deg); /* Firefox 4 */
        -webkit-transform:rotate(180deg); /* Safari and Chrome */
        -o-transform:rotate(180deg); /* Opera */

}

Also I'm not sure if your trying to alter an effect of some sort; but the transition code would look like this:

  transition:width 2s, height 2s;
 -moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
 -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
 -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */

Just add the transition before hand; then throw the transform on a hover. If your trying to add it like a button. Hopefully that helps.

I've used Firebug to view some additional data; with Firefox 16.02 this code worked:

.trapezium
{
  height: 0px;
  width: 80px;
  border-bottom-width: 80px;
  border-bottom-style: solid;
  border-bottom-color: #2d9dcd;
  border-left-width-value: 40px;
  border-left-style-value: solid;
  border-left-color-value: transparent;
  border-right-width-value: 40px;
  border-right-style-value: solid;
  border-right-color-value: transparent;
  margin-top: 30px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 10px;
}

I believe that is what you are looking for. Try that and let me know if it works.