エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
cssだけで画像を使わずに三角形を描画する - Qiita
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
cssだけで画像を使わずに三角形を描画する - Qiita
cssだけで画像を使わずに三角形を描画する方法について。 軽くググるとおそらくborderを使って実現する... cssだけで画像を使わずに三角形を描画する方法について。 軽くググるとおそらくborderを使って実現する方法がヒットするはず。 そのまま使えば目的達成の場合がほとんどでしょうが、パッと見ただけじゃどうしてあれで三角形になるのか謎ですよね。 そこで、どんな原理で三角形を描画しているのかをご紹介します。 理屈がわかればデザインの微調整だってできるはず! See the Pen triangle by ririli (@ririli) on CodePen. サンプルは上か順を追って説明していきます。 まずはfirstクラス border-topを引いただけです。 当然ですがただの棒ですね。 次にsecondクラス border-rightをたしてみました。 勘が良い人はここで気づくかも? 続いてthirdクラス borderを太くしてみました。 おや、 topとrightのborderが重な