17

我使用纯 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 和 IE9 都可以。我怎样才能找到解决这个问题的方法？

4

2 回答 2

1

你会想在 Firefox 中使用 -moz；-o 用于 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 */

}

另外我不确定你是否试图改变某种效果；但转换代码如下所示：

  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 */

只需事先添加过渡；然后将变换置于悬停状态。如果您尝试像按钮一样添加它。希望这会有所帮助。

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

我相信这就是您正在寻找的。试试看，让我知道它是否有效。

于 2012-12-04T01:54:06.203 回答
0

发生这种情况是因为缺少供应商前缀。如下应用供应商前缀，您会得到正确的。

过渡属性用于设置和计时过渡。
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);
}
于 2012-12-13T13:53:57.937 回答