HTML と CSS を使用して六角形の中に画像を表示できますか?

中に画像のある六角形

質問

HTML/CSS で六角形の中に画像を表示することは可能ですか?

提案された解決策

これを実現する 1 つのアプローチは、CSS3 変換を使用してクリッピング マスクを実装することです。

実装

まず、次の CSS クラスを使用して六角形の形状を定義します。

.hexagon {
  --base: 20px;
  --height: calc(var(--base) * sqrt(3) / 2);

  position: relative;
  width: var(--base) * 2;
  height: var(--height) * 2;
}

次に、オーバーフロー非表示と CSS 変換を利用して六角形マスクを作成し、その中に画像を配置します:

.hexagon > img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  clip-path: polygon(
    0 0,
    calc(100% - var(--base)) 0,
    100% calc(var(--height) * 0.5),
    100% calc(var(--height) * 1.5),
    calc(100% - var(--base)) 100%,
    0 100%
  );
}

コード例は次のとおりです:

<div class="hexagon">
  <img src="image.jpg" alt="Image inside hexagon" />
</div>

考慮事項

このソリューションは、ブラウザ間の互換性とクリック可能なマスクされた領域の両方を提供します。 CSS3 変換を活用することで、長方形以外の形状を柔軟に操作できるようになります。

以上がHTML と CSS を使用して六角形の中に画像を表示できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。