![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
No.2ベストアンサー
- 回答日時:
html
<ul>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
</ul>
css
li{
width: 150px;
height: 150px;
overflow: hidden;
position: relative;
transform: rotate(45deg);
margin: 40px;
float: left;
}
li img{
position: absolute;
width: 250px;
height: 250px;
transform: rotate(-45deg) translate(0%, -120%);
left: 100%;
top: 100%;
}
親で正方形を45度傾けたマスクを作り
imgで傾いちゃった画像を元に戻し、
rotate(-45deg)
適当な位置に調整しています。
translate(0%, -120%);
left: 100%;
top: 100%;
クリックすれば、リンクに張られたURLが開きます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- 画像編集・動画編集・音楽編集 エクスプローラー サムネイル表示されない 1 2022/12/22 10:14
- Windows 10 Windows10の画像ファイルのサムネールがアイコン表示になってしまいました。 3 2022/07/09 13:01
- Excel(エクセル) エクセルにサムネイル画像組み込み 2 2022/09/02 17:13
- Windows 8 動画の再生とタイトルの変更方法を教えてください。 3 2022/08/01 14:51
- フリーソフト 画像貼り付け、URLに飛べる軽いメモ帳 3 2022/05/12 07:42
- Android(アンドロイド) TIFF画像を表示できるAndroidアプリを探してます。 3 2022/05/16 09:00
- フリーソフト 倍率自動調整して全画面表示できるフリーの画像ビューアー 1 2023/08/24 10:55
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
番号付きリスト(<Ol><Li>・・...
-
<ul>~</ul>が二つ続くと間に改...
-
IEでスクロールできない
-
liタグの中に<p>タグやら<dl>を...
-
リストマーカーをボックス内に...
-
htmltとcssの連携をして画像縮...
-
円形の配置にするコーディング...
-
<ul><li></li></ul>にするメリ...
-
リストの数字のフォントサイズ...
-
<table>の高さ固定。情報増加時...
-
HTML5のfooterに見出しを付けて...
-
jQuery-もっと見るボタンをスマ...
-
CSSのみでのドロップダウンメニ...
-
(HP作成)メニューバーのプル...
-
display:table;を多段表示させたい
-
アコーディオンメニューがかく...
-
css ol liにdisplay:inlineを設...
-
HTMLで画像を3つ並べる方法
-
なぜ?マウスオーバーで1pt位置...
-
レスポンシブWebデザインでリン...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
レスポンシブWebデザインでリン...
-
html/cssの、navを2段にする...
-
リストの数字のフォントサイズ...
-
divタグ内のコンテンツが重なっ...
-
<ul><li></li></ul>にするメリ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
リンク文字同士の間隔を開ける...
-
<ul>~</ul>が二つ続くと間に改...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
display:table;を多段表示させたい
-
ボタンを横に並べて表示させる方法
-
CSS質問:大手サイトを見ると何...
-
html <li>の中の文字一部に色を...
-
html <ul></ul>の並びで一行空...
-
Tableの1セル内に画像・テキス...
おすすめ情報