CSS3 で背景画像を使用してホバリング可能な三角形を作成する方法

シームレスな三角形のリンク用の背景画像を使用した CSS3 三角形の作成

はじめに

インタラクティブな三角形で Web サイトの美しさを高めるの形のリンクは、視覚的な魅力を高めることができます。 CSS3 を使用すると、これらの幾何学的形状を簡単に作成し、背景画像を組み込んで奥行きと魅力を加えることができます。

透明なホバー ゾーンの課題

ただし、共通の問題が発生します。三角形を作成するとき: 背景画像の透明な部分の上にマウスを移動できない。このハードルにより、訪問者は基礎となるリンクにアクセスできなくなります。

解決策: 子画像の活用

この課題を克服するには、背景画像の代わりに子画像をリンクに使用することを検討してください。 。このアプローチを実装すると、子画像リンクの配置を維持しながら、親の三角形要素を個別に傾斜させることができます。

コードの実装

次のコードは、その方法を示しています。これを実装するテクニック:

HTML:

<div>
<p><strong>関連 CSS:</strong></p>
<pre class="brush:php;toolbar:false">.pageOption {
  overflow: hidden;
  position: relative;
  width: 40em; height: 27em;
}
.option, .option img { width: 100%; height: 100%; }
.option {
  overflow: hidden;
  position: absolute;  
  /* arctan(27 / 40) = 34.01935deg 
   * need to skew by 90deg - 34.01935deg = 55.98065deg
  */
  transform: skewX(-55.98deg);
}
.option:first-child {
  left: -.25em;
  transform-origin: 100% 0;
}
.option:last-child {
  right: -.25em;
  transform-origin: 0 100%;
}
.option img {
  transform: skewX(55.98deg);
  transform-origin: inherit;
}

結論

リンクに子画像を巧みに使用することで、それらを斜めの三角形要素に揃えることで、三角形全体のシームレスなホバリングを実現できます。この手法により、Web サイトのインタラクティブ性と視覚的な魅力が強化され、より魅力的なユーザー エクスペリエンスが提供されます。