背景画像を含む CSS3 三角形を作成し、クリック可能性を確保する方法

背景画像を含む三角形

プロジェクトでは、リンクとして機能し、背景画像を保持するには 2 つの三角形が必要です。問題は、1 つの三角形の透明な部分にマウスを移動して、その背後にあるリンクにアクセスできないことです。 CSS3 三角形と背景画像を使用してこのデザインを実現する方法は次のとおりです。

CSS3 三角形は境界線だけでは作成できず、長方形の形状のみが可能です。代わりに、背景画像の代わりに子画像をリンクに使用できます。改善されたコードは次のとおりです:

<div class="pageOption">
  <a href="#" class="option" data-inf="photo">
    <img src="../images/menuPhoto.png">
  </a>
  <a href="#" class="option" data-inf="cinema">
    <img src="../images/menuCinema.png">
  </a>
</div>

三角形の形状を担当する CSS:

.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;
}

このソリューションでは、スキュー変換プロパティを利用して CSS3 三角形を作成します。オプション内の画像は、コンテナの傾きを補正するために傾きが解消されます。コンテナーとオプションの両方でオーバーフローを非表示に設定すると、画像はそれぞれの領域の境界内に残ります。

以上が背景画像を含む CSS3 三角形を作成し、クリック可能性を確保する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。