CSS を使用して、歪んだボックスに完全に中央に配置された画像を作成する方法

対角線で対称的な画像を作成する

Web デザインの領域では、魅力的で視覚的に魅力的なビジュアルを作成することが最も重要です。人気を集めているテクニックの 1 つは、Reddit で偶然見つけた印象的なバナーに似た、対角線で区切られた画像の対称的な配置です。

この効果を実現するために、あなたは CSS を使用したコーディングの冒険に乗り出しましたが、次のような問題に遭遇しました。いくつかの課題。画像がボックス内に均等に分散されず、一部がこぼれてしまった場合もありました。これらの問題に対処する代替ソリューションを詳しく見てみましょう。

配置された要素に依存する代わりに、background-position の力を活用して、画像を簡単に中央に配置します。以下のコード スニペットは、簡素化された効果的なアプローチを提供します。

.container {
  display: flex;
  height: 150px;
  margin: 0 30px;
}

.box {
  flex: 1;
  border: 1px solid;
  transform: skew(-25deg);
  position: relative;
  overflow: hidden;
}

.box:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  right: -50%;
  transform: skew(25deg);
  background-image: var(--i);
  background-position: center;
}

この HTML 構造に適用すると、

<div class="container">
  <div class="box">

結果として、完全に中央に配置され、等間隔に配置された画像のセットが作成されます。斜めのボックス内で、魅力的でバランスの取れた視覚効果を生み出します。

以上がCSS を使用して、歪んだボックスに完全に中央に配置された画像を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。