Firefox和Opera渲染边框不正确

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.

我创建了一个使用纯CSS制作的梯形的圆形菜单，但是当我旋转它们时，Firefox在两侧显示一条线，在Opera上，所有梯形都有一个奇怪的背景/边框颜色，有点透明。梯形看起来像这样。

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

Chrome和IE9都可以。我怎样才能找到解决这个问题的方法？

2 个解决方案

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

您将要使用-moz for Firefox; -o for Opera。这些是在这些浏览器中正确格式化的扩展。这是一个很棒的形状网站。

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

我用Firebug查看了一些额外的数据;使用Firefox 16.02此代码有效：

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

我相信这就是你要找的东西。尝试一下，让我知道它是否有效。

#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

Transition属性用于设置和计时转换。 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);
}

#1