CSSを3つのステップで傾斜させた容器の作成方法

最近、個人のポートフォリオを更新したとき、Webサイトのメインレイアウトで視覚要素としてSlashes（/）を使用したかったのです。以前にCSSで傾斜容器を作成しようとしたことはありませんでしたが、一見簡単に思えます。しかし、より深く掘り下げると、テキストとメディアをサポートする効果的なCSSベベルコンテナを作成するために、非常に興味深い課題がいくつかありました。

これが私の試行と最終結果です：

まず、テキストが自然に流れるようにする非長方形の容器の例を探します。 Adobe IllustratorやMicrosoft Wordのようなプログラムは長年これを行ってきたので、これはCSSで実装できると思います。

ステップ1：変換を使用してCSSベベルコンテナを作成します

CSS Shapesモジュールが見つかりました。これは、Shape-Outsideプロパティを使用する場合にシンプルなテキストコンテンツに最適です。テキストを完全に調整します。ただし、コンテナの内側にコンテンツをスクロールさせることはできません。したがって、ユーザーが下にスクロールすると、チルト容器全体が左に移動するように見えますが、これは私が望む効果ではありません。代わりに、私はより簡単なアプローチを取りました。これは、 transform: skew()コンテナに追加することです。

 .Slant-Container {
  変換：スキュー（14DEG）;
}

これは良いスタートです！コンテナは傾斜し、スクロールは予想どおりに機能しますが、純粋なCSSは画像のサイズ変更を処理します。ただし、明らかな問題は、テキストと画像も傾いているため、コンテンツの読みが難しくなり、画像が歪んでいることです。

ステップ2：逆チルトフォント

CSSのテキストと画像の歪曲の問題を解決するためにいくつかの方法を試しましたが、最終的には簡単なソリューションを考え出しました。FontForgeを使用してテキストの歪みを逆にする新しいフォントを作成しました。

Fontforgeはオープンソースのフォントエディターです。 WebサイトのメインコンテンツにRoboto Condensed Lightを選択したため、.ttfファイルをダウンロードしてFontforgeで開きました。そこで、私はすべてのグリフを選択し、14度のチルトを適用して、コンテナのCSS変換によって引き起こされる傾斜を補正しました。新しいフォントファイルをRoboto-Rev-Italic.ttfとして保存し、StyleSheetで呼び出します。

それでおしまい。フォントは、コンテナの傾きと同じ量で反対方向に傾斜しているため、これらの効果を相殺し、コンテンツを最初に使用した通常のロボットフォントのように見せます。

ステップ3：画像とビデオを最適化します

これはテキストに非常に適しています！テキストを選択する機能も正常です。そこから、 skew()を逆にする必要があります。

 IMG、
ビデオ {
  変換：スキュー（-14DEG）;
}

ただし、画像やビデオを追加Divで包むことになりました。このようにして、コンテナと完全に一致するように見える素敵な背景を与えることができます。私がしたことは、 ::afterに接続し、傾斜した容器の左右の端を越えて行く背景を使用してそれを配置することです。

 IMG ::後、
ビデオ::後{
  コンテンツ： '';
  表示：ブロック;
  背景：RGBA（0、0、0、0.5）;
  位置：絶対;
  上：0;
  左：0;
  幅：200％;
  高さ：100％;
}

最終デモ

これが最終的なデモです：

私は今、私の個人的なウェブサイトでこの効果を使用していますが、これまでのところ大好きです。しかし、同様の効果を達成するために他の方法を試しましたか？比較できるように、コメントで必ずお知らせください！

以上がCSSを3つのステップで傾斜させた容器の作成方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。