線だけを表示させるにはどうしたら良いですか? 画像あり (HTML,CSS)

Question

青い線を作るにはどうしたら良いでしょうか？

練習でHTML,CSSで勉強中なのですが、まず線の作りかたと、斜めにするやり方を教えていただきたいです

ご回答のほどよろしくお願いいたします。

Answer 1

いくつか方法はあるかと思いますが、CSSのborderを利用した方法です。

①HTMLとCSSで、空っぽのdivを任意の大きさで作成。
※50pxの線を引きたければ幅50px等

②border-topのみ線種を設定。
※線の大きさ・種類・色等

③CSSで該当のdivを「transform」の「rotate」で設定。
※基準となる場所は「transform-origin」で設定。

④「position: absolute;」で任意の位置に指定
※状況により「transform: translate()」でも可能です。

参考：
transform:rotate()

---

検索すると、いろいろ出てきますので、理解しやすいサイトで試してみてください。

Comments

[JunJu]

ありがとうございました!!!

[yoshinavi]

解決されて何よりです。
(^^)