HTML,CSS flex要素内・外に画像ファイルを挿入

実現したいこと

画面中央に配置したflex要素の内側と外側に画像を配置したい。
KNT(それぞれ別ファイル)という画像をflex要素として中央に配置しました。
橙色の長方形要素に接する形で画像ファイルを挿入したいです。目指すイメージは下記のサイトで示す通りです。

前提

下記のサイトを参考にHTML,CSSの学習を行なっています。
https://takeshioide.com/

上記のサイトでは左右のWORKS, ABOUTにカーソルを合わせるとそこにaタグによって次の画面に遷移する仕様になっています。デベロッパーツールで仕様を確認しましたが、中央の要素がflexで配置されており、そこに2分した画像ファイルを回転？させて配置していると思われます。

CSSで

CSS
1img {
2    overflow-clip-margin: content-box;
3    overflow: clip;
4}

という記述があり、これが上記の仕様を可能にしているのではないかと考えました。
しかし、単にこれを模倣するだけでは実現できず、他の方法を模索しています。代替案もしくは上記サイトの詳細がわかる方がいらっしゃるようでしたら、ご教授願います。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

html
1<body>
2    <div class="home-container">
3        <div class="style">
4            <div class="greeting mt-5">
5                <div class="greeting greeting-text">Hi, I'm KNT. A Web Designer.</div>
6                <span class="greeting greeteng-border">|</span>
7                <span class="greeting greeting-contact">CONTACT</span>
8            </div>
9        </div>
10
11        <div class="home-nav-wrapper">
12
13    
14            <div class="home-name my-5">
15                <div class="home-name-img k">
16                    <img src="static/img/K.png" alt>
17                </div>
18
19                <div class="home-name-img n">
20                    <img src="static/img/N.png" alt>
21                </div>
22
23                <div class="home-name-img t">
24                    <img src="static/img/T.png" alt>
25                </div>
26
27            </div>
28
29        </div> 
30
31        <div class="side_bar">
32            <a href="#">
33                <div class="nav out-side works" id="out-works">
34                    <img src="static/img/WORKS.png" alt>
35                </div>
36                <!-- <div class="nav in-side works" id="in-side-works">
37                    <img src="static/img/WORKS下.png" alt>
38                </div> -->
39            </a>
40        </div>
41
42            
43        
44        
45
46
47
48    </div>
49
50
51    
52</body>
53</html>
54

CSS
1.greeting{
2    display: inline-block;
3}
4
5.style{
6    text-align: center;
7}
8
9.home-nav-wrapper{
10    background-color: bisque;
11    margin-top: 3%;
12    margin-left: 10%;
13    margin-right: 10%;
14} 
15
16.home-name{
17    display: flex;
18    justify-content: center;
19    /* margin-left: 15%;
20    margin-right: 15%; */
21}
22
23.home-name-img{
24    margin: 10%;
25}
26
27.home-name-img img{
28    height: 130%;
29}
30
31img{
32    overflow: clip;
33    overflow-clip-margin: content-box;
34}

結果は下に示す通りです。

試したこと

overflow: clip;
overflow-clip-margin: content-box;
について調べましたが、参考にできるサイトがあまりなく、理解できませんでした。

補足情報（FW/ツールのバージョンなど）

Visual Studio Codeを使用しています。

int32_t

2023/05/09 06:00

質問文から何を実現したいのかが不明瞭でした。画像を回転させて配置すること、ですか?

kgnmakl

2023/05/09 06:06

コメントありがとうございます。訂正しました。 KNT(それぞれ別ファイル)という画像をflex要素として中央に配置しました。橙色の長方形要素に接する形(内側、外側)で別の画像ファイルを挿入し、それらにaタグを付与したいです。目指すイメージは下記のサイトで示す通りです。 https://takeshioide.com/

行動規範の内容に同意します

回答1件

ベストアンサー

overflow overflow-clip-margin は関係ありません。ブラウザの開発者ツールで見ると user agent stylesheet で指定されているものだとわかるかと思います。何もしなくても設定されているプロパティです。

参考サイトと同様にするなら、.side_bar に対して position: absolute transform: rotate(-90deg) transform-origin: 0 0 を設定し、さらに top プロパティと left プロパティでうまいこと配置してください。参考サイトの class="home-nav-wrapper works enter" の要素のスタイルが参考になります。

投稿2023/05/09 06:13

int32_t

総合スコア21929