4

CSS 三角形を使用して矢印を作成する必要があります。これは私が取り組んでいるものです: http://jsfiddle.net/7vRca/

<div class="arrow-outer"></div>

.arrow-outer{
border: 1em solid transparent;
border-top-color: #3bb0d7;
border-right-color: #3bb0d7;
height: 0;
width: 0;

}

ここに画像の説明を入力

問題は、クロムで完璧に見えることです。しかし、firefox では真ん中に小さな曲がりがあります。

なぜこれが起こっているのか、クロムのように滑らかに見せるにはどうすればよいですか?

4

4 に答える 4

1

透明な境界線に「インセット」を設定すると役に立ちました。ここでこのトリックを見つけました：http://css-tricks.com/snippets/css/css-triangle/#comment-103785

于 2013-01-16T10:21:37.257 に答える
1

これをcssに追加してみてください：

 -moz-transform: scale(.9999);
于 2014-04-22T10:26:07.827 に答える
0

透明の代わりに RGB を使用してみてください。

<div class="arrow-outer"></div>

.arrow-outer{
   border: 1em solid rgba(255,255,255,0);
   border-top-color: #3bb0d7;
   border-right-color: #3bb0d7;
   height: 0;
   width: 0;
}

ここで行ったように:奇妙な暗い境界線: Firefox の css 矢印の後

編集：ちなみに、私のFirefoxでは両方の方法で機能します（灰色の線があるものとないものがありますが、あなたが説明した効果はありません...）

于 2012-12-27T12:04:32.150 に答える