【CSS】borderを使って、三角形作るのはやめませんか？ - Qiita

はじめに みなさんは、CSSで三角形をつくる時どのように作っていますか？ borderを使って作っていませんか？ この記事では、CSSで三角形をつくるベストプラクティスを紹介します。 今までの三角形の作り方 See the Pen CSS Masking - Fade out UI by でぐぅー | Qiita (@sp_degu) on CodePen. 今までは、三角形を↑このようにborderを駆使して作成していました。 どうしてこうなるかは、省略しますが、本来のプロパティとは違う使い方でうつくしくないですよね！ この方法のいけてないポイントは以下の通りです。 1. 指定の大きさの三角形をつくるのに、border-widthを使うところ 本来、border-widthは、要素の境界の幅を指定するプロパティで、要素の大きさを指定するプロパティではありません。 理想は、widht と

[degucho]

CSSで三角つくるのやめませんか？少なくとも文書のレイアウト定義ではないですよね

[shishikaba]

個人的にはこの位の記号を使うならもうSVGにしちゃうかなぁ

[naoya2k]

正三角形の高さは「底辺*cos(60deg)」が正しい、と思ったがここで重要なのは中央に頂点を置くことなので「底辺/2*tan(60deg)」が正しく、直角二等辺三角形も「底辺/2*tan(45deg)」であった。元のブクマ指摘間違ってたごめん

[north_korea]

これより前の時代は小さい四角形を45度回転させて下半分を隠すみたいな事もしていた…

[nekosann_08]

ありがとうFontAwesome（普段言えない感謝

[genhou]

IE亡き今、たしかにclip-pathで書くのが良さそうですね。画像はないです、こんなちょっとしたパーツのためにアセットを増やしたくないです。仮に画像にしたって、どうせCSSで位置調整するんですし。

[rh-kimata]

CSSのテクニックとしては面白いし、三角形を作るならボーダーを使うよりクリッピング領域で切り抜いた方が筋がいいと思うけれど、そもそも画像で良いのではないだろうか

[sds-page]

IE嫌いもいいけど「Excelでイラストを描く」みたいな事やってるのは自覚して欲しい

[mayumayu_nimolove]

多分どのweb制作会社もcssで単純な図形書いてないよ。

[uva]

この方法とSVGとだとどっちが良いんだろう

[nelpesica]

[]

[rogertroutman]

transformでもlinear-gradientでも、CSSで三角形を作る方法なんて無限にありますし「私もひとつ思いつきました」でよいのでは。セマンティックでない飾りパーツなんて好きな方法で作ればいいと思います。

[cpw]

なんでこんなトリッキーなことするのだろう。普通にsvgでいいんじゃないかね。

[mng_dog]

背景画像を三角形で抜いてその三角形をアニメーションで変形させる、みたいな時はCSSで実装する必要があるのかな。

[yaboot]

box-shadowとの相性が悪いのでSVGが安定

[kamayan1980]

これも込み込みで画像アセットにしたほうが「三角はCSSで描いてるけど矢印はアセットです。あ、バーガー線はCSSです」みたいなトンチキ管理にならなくて良いと思う。

[hatest]

こういう無駄なバッドノウハウは、全部IEのせい

[Sinraptor]

画像をbase64で埋め込めばいいやん

[kathew]

CSSって装飾全般を扱うものでレイアウト定義ではないような。CSSで三角書くのやめようには同意。svg使おう

[miruto]

おおお！これは早速取り入れてみよう！IE考えないならclip-pathが使えるのは助かる😎

[toaruR]

装飾はcssで合ってると思うけど、いずれにしてもどんぐりかなぁ（´－｀）なお、文書構造、レイアウト、装飾の3要素を分離したいならhtml+cssの2つで厳しいのは必然。XSLTもIE消えて瀕死

[buhoho]

SVGもろくに実装されてなかった時代の残り香ではある

[cb-jim]

でたよベストプラクティス

[terashimaWataru]

ジェネレーターを作ってくださいませんか／この時代にCSSの役割を狭義の「文書のレイアウト定義」のみとするのは無理筋すぎる気もする

[Helfard]

サカバンピスピス v(・▼・)v ← これをもっとそれっぽく書けたら優勝でいいよ。

[euclidean]

三角形程度の単純な図形ならインラインSVGかな

[sakidatsumono]

ああ、image生成以外の方法があったのね。

[marunabe]

タグ形状や吹き出しの三角形部分とかでよく使ってた。cssのボックスに横付けするからcssで合わせた方が色々都合がいいんだよね。単品で使うならsvg。今度三角形作りたくなったら参考にしたい。

[tockri]

IE11は不可だけどもういいよね。clip-path generatorでググればジェネレーターもいっぱいあるから使いやすい。

[shimatokuo]

ちょっとした形状まで画像ファイルやSVGで実装するという「ベテラン」の意見があるが、これは若手は聞かなくていいよ。手法を更新しない（できない）言い訳でしかない。たかがパスだ。

[blueboy]

　高解像度の GIF 画像を（ width 指定で）縮小表示する方が簡単。3.7KB。　　https://cdn-ak.f.st-hatena.com/images/fotolife/b/blueboy/20230619/20230619084444.gif　　すごく古いブラウザでも表示できるぞ。低機能のスマホやモバイル機器でも。

[shiromatakumi]

CSSかSVG。画像だと色変更とか微調整面倒くさすぎでしょ。

[yamadar]

良い。本来の目的以外にハックして使うはバッドノウハウなので廃れるべき

[aquarickn]

めちゃめちゃいいけど、アイコンにしてくれや

[misarine3]

svgだと使い勝手の悪いシーンが結構あるんですよ。個人的にはどんなcssでもいいと思うけど、作り方の手数をいくつも持ってる方がいいに決まってる。この手の議論は不毛。

[b_wa]

こういう記事を書く時はcaniuseくらい載せてほしいな。

[rna]

clip-path知らなかった。can i use 見たらだいぶ前からあるけど完全なサポートはまだ一部なのか。図形描くだけならSVGの方が互換性高いしセマンティクス的にも正道だと思うが…

[sametashark]

cssで表現しづらい時svgにしてる。 CSS描画は差分表示と変更に強くgit上有利。別アセットはロード時の通信回数由来で遅くなる。画像はバージョン管理的に微妙。svgは差分表示が直感的じゃない。 dataURLは変換面倒。

[nekonyantaro]

clip-pathですか。存在すら知らなかった。

[strawberryhunter]

SVGに一票。HTMLに直接書けばアセット増えないよ。