Firefox and Opera rendering border incorrectly - css

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.

Answer 2

This is happening because the vendor prefixes are missing.
Apply the vendor prefixes as following and you will get it right.
Transition property is used to set and time the transitions.
https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions
.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;
-webkit-transform: rotate(100deg);
-moz-transform: rotate(100deg);
-o-transform: rotate(100deg);
-ms-transform: rotate(100deg);
transform: rotate(100deg);
}