css – Firefox和Opera渲染边框不正确

我创建了一个使用纯CSS制作的梯形的 circular menu，但是当我旋转它们时，Firefox在两边都显示一条线，而在Opera上，所有的梯形都有一个奇怪的背景/边框颜色，透明的。梯形图 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和IE9可以。
如何找到解决这个问题的方法？

解决方法

您将需要使用-moz for Firefox; -o为歌剧。这些是这些浏览器正确格式化的扩展。 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 */

}

另外我不知道你是否试图改变某种效果;但转换代码将如下所示：

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

只需在手之前添加转换;然后将转换抛出悬停。如果你想添加一个按钮。希望有帮助。

我使用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;
}

我相信这是你正在寻找的。尝试，让我知道，如果它的作品。

原文地址：https://www.jb51.cc/css/218359.html