【CSS】【図形】なが~~い矢印を作る【斜めも可】【円弧もあるよ】【むりくり1DIV】


はじ めに

文字や下線としての矢印はいっぱいあるけれど、
線という意味では、探してもあまりなくて、
考えてみました。

皆さんに共有します。

HTML側は  1DIV(むりくり)です。

checkout
straight tp right

解説

それでは、解説行きますよ!

1,2番目:勢いのある?矢印

1,2番目は、前回台形で説明した3次元回転を利用してます。台形の右下だけborderを入れるイメージです。1DIVで済みますが、ただし、3次元で回転を使っているので、使用用途として斜め矢印等はできません。上下左右のみです。

文字がそのまま載せられるのは、いいですね。ななめっちゃうけど。paddingで調整して、ダメならあきらめて別DIVのパーツを作るしかないでしょうか。

3番目 :斜めも可

3番目はよくあるやつです。
::after ,::before要素に borderで三角を作ってます。

ポイントとしては、contents:"" で中身を消しておき、 right:, bottomをで場所を指定して作っておくと少し楽できます。

矢印の頭を<の字にborderで作るパターンや、おしりを●や◆で作るパターンもあります。

斜めに使うには、::after,::before要素を使った頭にして、transform : rotate(0deg);で作るとセットで動きます。

欠点は、css のclassで作っても、after要素では、色や太さをHTMLから変更できないので、ちょっと面倒です(やりかたあるのかな?)。 長さも 手を入れる必要があると思うので、斜め用途はイマイチですがこれぐらいしかありません。

4番目:円弧

4番目は円弧です。

border-radius: で丸めてるので、斜めができます。上と右とかだけborderを設定しています。三角は良くあるパターンです。

円弧型ですが、末端が細くなるのと、回転すると、始点・終点調整が難しく三角の位置取りも面倒なところですね。

頭まで斜めをきっちり設定したい場合、三角も別DIVとしてパーツを別に作ったほうがいいかもしれません。

全体的に position:relative で囲い、各パーツを absoluteにしておけば、left/topで自由に場所を移動できます。

下のマージンがないと重なってしまうので注意してください。

パーツをまとめたいときは、さらにDIVで階層構造にすればグルーピングできますね。位置調整で楽できます。

ソース

ソースはこちら。
前半が CSS部で、後半がHTML部です。

その他、矢印に関して、参考になるWebページ

斜め指定を楽にする?

斜めに柔軟に設定できるやり方がありますが、四角が大きくなると線も太くなるという、副作用があるのでイマイチでした。ただ表などには使えると思います。
下記ページ最後

3/3 CSSで斜線を引く方法:表の空セルなど任意のHTML要素に [ホームページ作成] All About
https://allabout.co.jp/gm/gc/457196/3/#aa457196p3f

上下左右矢印の他のデザイン例

1,2番目と3番目のあいのこの例です。

スタイルシートで矢印を描く。 - freefielder.jp
https://freefielder.jp/blog/2018/05/draw-arrows-using-css.html


Delicious にシェア
Digg にシェア
reddit にシェア
LinkedIn にシェア
LINEで送る
email this
Pocket

132 views.



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です