詳しい人求む！

HTML 、 CSS ではみ出る線の表現

解決済

質問者：i-d-a-i
質問日時：2022/11/16 10:51
回答数：2件

添付画像のように、 CSS で、はみ出た線を表現出来ますか ?
画像の線はゆらゆらしてますが、真っ直ぐの線と考えてください。

詳しい方、教えてください。

これはメニューに使うものです。
メニュー 1 、メニュー 2 といったような感じです。
説明足らずな文章と絵ですみません。

補足日時：2022/11/16 12:54
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2022/11/16 16:13

No1です。

＞四角の中には、メニュー 1 、メニュー 2... といったように入ります。
＞それを再現できますか ?
それなら、メニューを主体としたHTMLにすべきでしたね。
とは言え、組み直すのは面倒なので、つぎはぎ的に処理してもよければ・・

1）div#hogeの直下（＝子要素）に
<ul>
<li>メニュー１</li>
<li>メニュー2</li>
</ul>
を追加。

2）CSSに
#hoge ul {
list-style-type: none;
width: 70%; height: 100%;
padding:0; margin-left: 15%;
display: flex;
justify-content: space-around;
align-items: center;
}
を追加。

することで、雰囲気的にはそんな感じになるかと。

「可能」という意味だけのつぎはぎなので、実際には、きちんとしたHTMLを作成してから、同じような方法で枠線等を描くようにした方が宜しいでしょう。

- 0
- 件

通報する

この回答へのお礼

実現可能であることがわかりました。
そして、勉強になりました。

回答ありがとうございます。

通報する

お礼日時：2022/11/17 10:07

参考程度に

No.1

回答者： fujillin
回答日時：2022/11/16 12:31

こんにちは

方法はいろいろあると思います。
極端な例としては、画像で作っておいて背景や画像として表示するとか。
（ご質問が「CSSで」となっているので、多分これは違うのでしょうけれど・・）

CSSで考えるなら、要素の枠線を利用したり、細長いブロック要素を塗りつぶして配置するとか・・
HTMLの構成や実際に何を意味するものなのか不明なので、以下は形だけそれっぽくしたみただけですが、DIV要素ふたつを用いて、枠線の表示で似たものを作ってみた例です。

※ 枠線の色を変えてみれば、何が何を指定しているかわかるでしょう。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#hoge { width: 400px; height:100px; }

#hoge {
position: relative; margin:100px auto;
border: 0 solid black; border-width: 0 4px 4px 0;
}
#hoge::after {
position: absolute; content: "";
top: 0; left: -30%; width: 130%; height: 0;
border-top: 4px solid black;
}
#hoge>div {
position: absolute; top: -20%; left: 15%;
width: 70%; height:140%;
border: 0 solid black; border-width: 0 4px;
}
#hoge>div::after {
position: absolute; content: "";
top: -20%; left: 0; width: 50%; height: 140%;
border-right: 4px solid black;
}
</style>

</head>
<body>
<div id="hoge"><div></div></div>
</body>
</html>