CSSJavaScriptWordPressPHPgulpスマホサイトの矢印付きメニューをCSSのみで実装する。HTML&CSSスマホサイト制作macky2014.04.15こんにちはもうすぐ待ちにまったGWですね。今年は、多い人で11連休とかあるんじゃないでしょうか。そんなことしたら...もう、社会復帰できる自信がないmackyです。矢印付きメニューをcssのみで実装してみようと思います。CSSのみで実装する定番の矢印つきメニューこんな感じです。HTMLを用意します。rotate(45deg);}:afterを使用して6px×6pxの疑似要素をつくり、border-topとborder-rightで直角をつくり、それを45°回転させています。次は意外と多いデザイン右向き三角矢印をやってみます。CSSのみで実装する右向き三角矢印つきメニューこんな感じです。※htmlは同じです。rotate(45deg);}まとめ覚えておくとスマホのメニュー欄やブログの記事一覧、など使い勝手がよさそうですよね。つかったことなーいという方は是非、挑戦してみてください^^この記事を共有するシェアTweetこの記事を読んだ人にオススメSVG画像のHTMLでの使い方HTML&CSSkoya2021.03.01cssでPhotoshopのように画像にエフェクトを追加する方法HTML&CSSkoya2020.04.09間違いやすいHTML5の要素を再確認HTML&CSSkoya2020.02.20Sassでテーマ用CSSを作成するHTML&CSSfujihara2019.10.31バシャログ。Web制作スタッフによるブログです。「現場で使えるテクニック」をモットーに、Web制作全般についてお届けします。