CSSを使用して画像ギャラリーの端だけを傾けるにはどうすればよいですか?

複数の歪んだ画像の組み合わせの端の傾きを戻す

以前は、一連の画像を歪ませる方法が考案され、満足のいく結果が得られました。ただし、課題は残りました。コンテナの内側の部分を傾けずに、左端 (ボックス 1) と右端 (ボックス 6) だけを傾ける方法です。

解決策

この問題に対処するために、洗練された CSS ソリューションが開発されました:

 --s: 50px; /<em> 斜め部分を制御 </em>/<p>display:grid;<br> height: 350px;<br> gap: 8px;<br> Grid-auto-flow: column;<br> place-items: center;<br>}<br>.gallery > img {<br> width: 0;<br> min-width: calc(100% var(--s));<br> height: 0;<br> min-height: 100%;<br> object-フィット: カバー;<br> クリップパス: ポリゴン(var(--s) 0,100% 0,calc(100% - var(--s)) 100%,0 100%);<br> カーソル: ポインター;<br> トランジション: .5s;<br>}<br>.gallery > img:hover {<br>幅: 15vw; <br>}<br>.ギャラリー > img:first-child {<br> min-width: calc(100% var(--s)/2);<br> place-self: start;<br> クリップパス: ポリゴン(0 0,100% 0, calc(100% - var(--s)) 100%,0 100%);<br>}<br>.ギャラリー > img:last-child {<br> min-width: calc(100% var(--s)/2);<br> place-self: end;<br> クリップパス:polygon(var(--s) ) 0,100% 0,100% 100%,0 100%);<br>}</p><p>ボディ{<br> マージン: 0;<br> 最小高さ: 100vh;<br> 表示: グリッド;<br> コンテンツの配置: センター;<br> 背景: #ECD078;<br>}</p>

;

このコードは、6 つの画像を含む CSS グリッドを定義します。グリッドは、画像間のギャップと、画像をグリッド セル内の中央に配置する配置アイテム プロパティを使用して構成されます。各イメージには、幅 0、最小幅 100% プラス変数 --s の値、高さ 0、最小高さ 100% が与えられます。 object-fit プロパティは、カバーするように設定されており、アスペクト比を維持しながら画像が利用可能なスペースを確実に埋めます。

クリップパス プロパティは、歪んだ形状を作成するために使用されます。各イメージについて、多角形は形状の 4 つの辺を定義する 4 つの点を指定します。 --s の値は、コンテナの先頭と末尾の傾斜部分の幅を制御し、外観を微調整できます。

:hover スタイル ルールは、ホバー上の画像に適用され、増加します。より目立つように幅を調整します。 :first-child スタイルと :last-child スタイルは、最初と最後のイメージのクリップ パスを調整して、コンテナの端に望ましい斜めの効果を生成します。

このソリューションにはいくつかの利点があります。レスポンシブ デザインで、画像のアスペクト比を維持し、歪んだ形状の外観を制御できます。

以上がCSSを使用して画像ギャラリーの端だけを傾けるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。