背景画像を含む CSS3 三角形は、クリック可能な透明領域を処理できますか?

背景画像を使用した三角形の作成

質問:

2 つの三角形を使用した Web サイトのデザイン背景画像を含み、クリック可能なリンクとして機能する要素は、三角形の透明な部分をクリックできるようにしようとすると困難になります。このデザインは、CSS3 三角形と背景画像を使用して実現できますか?

答え:

子画像の使用:

簡略化するためプロセスを実行し、ほとんどのブラウザとの互換性を維持するには、背景画像の代わりに子画像をリンクに使用することが回避策です。この方法では、変換スキュー プロパティを使用して三角形を作成し、子イメージをオフセットしてスキューを補正します。

手順:

• コンテナ div を作成する適切な寸法 (例: 幅 900 ピクセル、高さ 600 ピクセル) で配置します。
• 三角形の 2 つの子 div を追加し、変換原点が対角になるように絶対位置を決めます。
• 各三角形を特定の角度で傾けます。三角形の高さと幅 (この例では -55.98 度) に基づいて計算された角度。
• 各三角形内に子画像を作成し、親 div と同じ角度で回転させます。
• 設定コンテナーと三角形 div の両方で非表示にするオーバーフロー プロパティ。

HTML:

<div>
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">.container {
  overflow: hidden;
  width: 900px;
  height: 600px;
}

.triangle, .triangle img {
  width: 100%;
  height: 100%;
}

.triangle {
  overflow: hidden;
  position: absolute;
  transform: skewX(-55.98deg);
}

.triangle:first-child {
  left: -.25em;
  transform-origin: 100% 0;
}

.triangle:last-child {
  right: -.25em;
  transform-origin: 0 100%;
}

.triangle img {
  transform: skewX(55.98deg);
  transform-origin: inherit;
}