web-dev-qa-db-ja.com

滑らかなエッジを持つCSS三角形を作成するにはどうすればよいですか？

このCSSを使用した三角形（ JSFiddle ）があります：

.triangle {
    width: 0;
    height: 0;
    border-top: 0;
    border-bottom: 30px solid #666699;
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent;
    }

そして、このHTML：

<div class="triangle"></div>

これにより三角形が作成されますが、対角線はギザギザでピクセル化されます。どうすればそれらをスムーズにできますか？ （Safariでそれらを滑らかにし、Chromeを点線にすることでできましたが、FirefoxとIEで三角形が壊れました。）

cssgeometrycss-shapessmoothedges
31
kirkaracha

純粋なCSSでも、滑らかな対角線を取得できます。

.triangle {
    width: 0;
    height: 0;
    border-top: 0;
    border-bottom: 30px solid #666699;
    border-left: 20px solid rgba(255, 255, 255, 0); 
    border-right: 20px solid rgba(255, 255, 255, 0);
}

透明にする代わりに、rgba（255、255、255、0）を使用できます。これもまた透明性を与えます。しかし、alpha = 0は滑らかな対角線を作成します。

Rgbaのブラウザサポートを確認してください css-tricks.com/rgba-browser-support

ありがとう

19
iamjustcoder

Firefoxの場合、-moz-transform：scale（.9999）;を追加できます。滑らかなエッジを作成します。あなたの場合：

.triangle {
    width: 0;
    height: 0;
    border-top: 0;
    border-bottom: 30px solid #666699;
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent;
    -moz-transform: scale(.9999);
}

トリックを行います。

54
Caner Şahin

私はちょうど同じ問題に出会ったばかりで、このトリックを見つけました（少なくとも、Macで動作します）。

-webkit-transform: rotate(0.05deg);
-moz-transform: scale(1.1);
-o-transform: rotate(0.05deg); /* Didn't check Opera yet */
transform: rotate(0.05deg);
29
unclenorton

透明な境界線に境界線スタイルinsetを使用すると、Firefoxでより良い結果が得られます。

border-top: 22px solid $pink;
border-right: 84px inset transparent;
border-left: 84px inset transparent;
13
kcmr

これに最初につまずいたときに本当に助けになったのは、一定の量で均一な三角形をスケーリングすることでした。 Firefoxは、三角の三角形が特にエッジの効いたようです。興味深いことに、完全な三角形はギザギザのエッジなしでレンダリングされます。プロジェクトでCSS変換が可能な場合は、次を試してください。

.triangle {
  width: 0;
  height: 0;
  border-top: 0;
  border-bottom: 20px solid #666699;
  border-left: 20px solid transparent; 
  border-right: 20px solid transparent;
  -moz-transform: scaleY(1.5); // optional: replace with Sass/SCSS/LESS mixin
  -moz-transform-Origin: top; // optional: replace with mixin, too
}

これにより、Edge全体のエイリアスが修正されました。 JSFiddle here （Mozillaのみ）。お役に立てれば！

3
Sascha Michael Trinkaus

非常にハックな方法は、回転したdivを使用することです

ここでは、2つのdivを使用して三角形を表示します。

<div class="triangle">
    <div class="rot"></div>
</div>

三角形の2つの右辺ではない内側のdivを回転させました：

.triangle{
    position:relative;
    width:100px;
    height:60px;
    border-bottom:1px solid black;
    border-radius:12px;
}
.rot{
    border-radius:10px;
    border-left: 1px solid black;
border-top: 1px solid black;
width:70px; height:70px;
    -webkit-transform:rotate(45deg);
    position:absolute;
    left:15px;
    top:23px;
}

数字の関係を見つけようとしませんでした。

コードのフィドルは次のとおりです。

http://jsfiddle.net/mohsen/HTMcF/

しかし、この理由でcanvas要素を使用することを強くお勧めします。

1
Mohsen

私にとって、透明な境界線にdashedを使用すると、自動的に滑らかにならないほとんどのブラウザで機能し、古いWebkitでは360度回転できました。

.triangle {
    width: 0;
    height: 0;
    border-top: 0;
    border-bottom: 30px solid #666699;
    border-left: 20px dashed transparent; 
    border-right: 20px dashed transparent;
    -webkit-transform: rotate(360deg);
}
1
tobymackenzie

他の人は誰も私のために働いていませんでしたが、次のものが（偶然に）見つかりました：

.triangle {
  border: 1.3rem dashed #666699;
  border-right: .5rem solid rgba(255, 255, 255, 0);
}

破線/実線とrgba修正の混合は、FF31、IE11、およびChrome36で機能しました。

0
Don