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 オペラの場合。これらは、これらのブラウザー内で正しくフォーマットするための拡張機能です。ここで形のための素晴らしいサイト.

.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 に答える