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

背景画像を含む三角形: CSS3 アプローチ

リンクとして機能する背景画像を含む 2 つの三角形を作成するという目標は、CSS3 で達成できます。三角形。当初は、カスタム シェイプには境界線の色の境界線が必要であると想定していましたが、別のアプローチも可能です。

子画像を使用した解決策

背景画像に依存する代わりに、子の使用を検討してください。三角形の画像。この手法には、異なる変換起点を持つ .option 要素を歪ませることが含まれます。最終結果で目に見える歪みが発生しないようにするには、子画像の歪みを修正し、.pageOption 要素と .option 要素の両方に overflow: hidden を適用します。このアプローチにより、IE8/7 と Opera Mini を除く幅広いブラウザーとの互換性が提供されます。

HTML 構造

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

この CSS 構成は、子画像の傾きを補正しながら三角形を効果的に歪め、透明な領域にホバリング機能を備えた望ましい三角形の形状をもたらします。三角形の位置と変換原点を調整して、さまざまな三角形のサイズと向きを実現できます。

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