今回はCSSのみで三角形のマークを作る方法を説明していきたいと思います。
こんな感じで、ページの境目などにも使えます。
実はこれ、画像ではなくてCSSのみで作れます。
擬似要素を用いて簡単に作れます。
コードは以下の通りです。
::after { content: ""; //擬似要素なので記述してください position: absolute; //親要素はrelativeに指定してください top: 0; //好きな位置を指定 left: 45%; //好きな位置を指定 border: 40px solid transparent; //40pxが幅になります border-top: 30px solid white; //30pxが縦の長さになります }
作りたいところのCSSにコピペして使えます!
コメントにしているところを参考に使ってみてください。ホワイトの三角形ができると思います。色も適宜変えて試してみてください。
また、なぜ三角形が作れるのか?という解説に関しては、以前書きましたので合わせてご覧ください。
Cssで吹き出し、矢印風デザイン
仕組みが分かれば、さらに扱いやすくなりますので理解コピペより理解して使うことをお勧めします!
Next Post
Tableセルの特定のものだけ大きくする方法
今回はtable内の特定のセルのみ大きくする方法を紹介して...
Prev. Post
[基本] z-indexの使い方 効かない時の対処法
Cssで重なりの順序を指定することができる「z-index...
コメント
名前 *
次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。
WPの投稿にコードを記述
WordPressの投稿にHTMLやCSSのコードを記述する方法です。 普通にコードをコピペ...
WordPressの投稿にHTML...
2020年11月14日
【見出しデザイン】マーカー風〜linear-gradient〜
今回は見出しのデザインとコードを紹介したいと思います。 マーカーを引いたようなデザインです。...
今回は見出しのデザインとコードを紹...
2020年12月28日
初心者おすすめSEO勉強ツール
先日SEOの案件を獲得できましたので私が読んで参考になったものを少し紹介したいと思います。 ...
先日SEOの案件を獲得できましたの...
2020年12月6日
Hoverした時に全体がずれる
Hover時にborder-bottomを追加すると、サイト全体が下にずれることがあります。 ...
Hover時にborder-bot...
2020年10月10日