CSS を使用して背景画像を含む三角形の画像を作成する方法

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

このプロジェクトでは、リンクとして機能する背景画像を持つ 2 つの三角形画像を作成することを目的としています。デザインのモックアップは、これらの三角形を特定の配置で示しています:

[背景画像を含む三角形画像の画像]

当初、div を使用して背景画像を適用してこれを実現しようとしました。ただし、このアプローチでは、画像の透明な部分にマウスを移動して基になるリンクに到達するという課題がありました。

背景画像を使用した CSS3 三角形: 実行可能な解決策

はい、達成できます。このデザインは CSS3 三角形を使用して背景画像を設定します。実際、カスタム形状は、指定された境界線の色の境界線を使用して作成されます。

背景画像を含む CSS3 三角形のコード実装

CSS を使用して背景画像を含む三角形画像を実装するのに必要なコードは次のとおりです。 :

.pageOption {
  position: relative;
  width: 900px;
  height: 600px;
}

.pageOption .photo {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 900px;
  height: 600px;
  background: url('../images/menuPhoto.png') no-repeat 0 0;
}

.pageOption .cinema {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 900px;
  height: 600px;
  background: url('../images/menuCinema.png') no-repeat 0 0;
}

子画像とスキュー変換を使用する別のアプローチ

別のアプローチは、背景画像の代わりに子画像をリンクに使用することです。これには、異なる変換元の .option 要素を傾斜させ、その子画像の傾斜を解除し、.pageOption 要素と .option 要素の両方で overflow: hidden を設定することが含まれます。

HTML:

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

このアプローチは、IE8/7 と Opera Mini を除く、さまざまなブラウザー間でのサポートが強化された、よりクリーンなソリューションを提供します。

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