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

気に入った記事をブックマーク

気に入った記事を保存できます
保存した記事の一覧は、はてなブックマークで確認・編集ができます
記事を読んだ感想やメモを書き残せます
非公開でブックマークすることもできます

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

テクノロジーカテゴリーの変更を依頼記事元:

qiita.com/degudegu2510

適切な情報に変更

エントリーの編集

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます

コメントを非表示にできますコメント表示の設定

ブックマークしました

ここにツイート内容が記載されますhttps://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

次回からTwitterへ自動リダイレクト

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

329usersがブックマークコメント

コメントするにはログインが必要ですブックマークを追加

ブックマークを追加

よく使うタグ

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

329 users

qiita.com/degudegu2510

よく使うタグ

はてなブックマークで
関心をシェアしよう

みんなの興味と感想が集まることで
新しい発見や、深堀りがもっと楽しく

ユーザー登録

アカウントをお持ちの方はログインページへ

記事へのコメント57件

注目コメント
新着コメント

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

2023/06/18リンク

その他

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

2023/06/18リンク

その他

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

2023/06/18リンク

その他

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

2023/06/18リンク

その他

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

2023/06/19リンク

その他

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

2023/06/18リンク

その他

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

2023/06/18リンク

その他

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

2023/06/19リンク

その他

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

2023/06/18リンク

その他

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

2023/06/18リンク

その他

nelpesica[]

2023/11/27リンク

その他

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

2023/06/19リンク

その他

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

2023/06/19リンク

その他

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

2023/06/19リンク

その他

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

2023/06/19リンク

その他

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

2023/06/19リンク

その他

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

2023/06/19リンク

その他

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

2023/06/19リンク

その他

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

2023/06/19リンク

その他

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

2023/06/19リンク

その他

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

2023/06/19リンク

その他

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

2023/06/19リンク

その他

cb-jimでたよベストプラクティス

2023/06/19リンク

その他

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

2023/06/19リンク

その他

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

2023/06/19リンク

その他

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

2023/06/19リンク

その他

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

2023/06/19リンク

その他

tettekete37564へぇー最近はそんなのあるんだと思うと同時に、その三角形ってどこで使うの？▲←これじゃダメなの？っていう

2023/06/19リンク

その他

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

2023/06/19リンク

その他

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

2023/06/19リンク

その他

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

2023/06/19リンク

その他

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

2023/06/19リンク

その他

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

2023/06/19リンク

その他

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

*CSS

2023/06/19リンク

その他

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

2023/06/19リンク

その他

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

2023/06/19リンク

その他

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

2023/06/19リンク

その他

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

2023/06/19リンク

その他

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

2023/06/19リンク

その他

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

2023/06/19リンク

その他

コメントするにはログインが必要ですログインしてコメント

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

プレビュー

はてなブックマークボタンを作成して埋め込むこともできます

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

usersに達しました！

さんが1番目にブックマークした記事「【CSS】borderを使...」が注目されています。

気持ちをシェアしよう

ツイートする

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

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