CSS を使用して、クリック可能な画像を円形に配置できますか?

アイコンを円の中に配置します

質問: 複数の を配置できます。要素を別の要素の周囲に円を描くように配置し、それらの要素をクリック可能なリンクにしますか?

答え:

はい、CSS を使用すると可能です。ここでは 2 つの解決策を示します:

最新の解決策 (2024)

1. URL と代替テキストを含む画像の配列から開始します。
2. Pug またはその他を使用して HTML を生成します。画像とのリンクを作成するメソッドです。
3. 画像の数と画像に基づいてコンテナのサイズを設定しますサイズ。
4. CSS 変換を使用して円上に画像を配置します。

従来のソリューション (歴史的な理由から保存)

1. 位置を指定してラッパーを作成します。相対的;
2. position:Absolute; を使用して、画像を含むリンクをラッパーの中央に配置します。
3. 各画像の角度を設定し、連鎖 CSS 変換を適用します。

.deg{desired_angle} {
   transform: rotate({desired_angle}) translate(12em) rotate(-{desired_angle});
}

注: 最新のソリューションは柔軟で、変更せずに新しい画像を追加できます。現在の構造。

以上がCSS を使用して、クリック可能な画像を円形に配置できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。