CSS を使用してテキストを水平に揃えたまま要素の背景を傾けるにはどうすればよいですか?

テキストの配置を維持しながら斜めの要素を作成する

CSS の領域では、特定の視覚効果を実現するには革新的な考え方が必要です。そのような効果の 1 つは、要素に含まれるテキストを歪めることなく、歪んだ要素を作成することです。

メニュー項目の上にマウスを置くと、茶色の背景が斜めに表示される以下の画像を複製するとします。

[白いテキストが付いた傾いた茶色のメニュー項目の画像]

これを実現するには、傾きと反転の組み合わせを利用できます。歪んでいます。重要なのは、親要素 (この場合は li) に skew() を適用し、その子要素 ​​(アンカー タグ、a) に skew(-deg) を適用することにあります。これにより、傾きが解消され、背景が傾いてもテキストは水平に保たれます。

関連する CSS は次のとおりです:

nav li {
  transform: skew(20deg);
}

nav li a {
  transform: skew(-20deg);
}

さらに、ホバー状態を追加して背景色を変更することもできます。ユーザーがメニュー項目の上にマウスを移動したときのテキストの色:

nav li:hover {
  background: #1a0000;
  color: #fff;
}

これらの CSS テクニックを組み合わせることで、視覚的に作成できます。適切なテキスト配置を維持しながら、歪んだ要素を魅力的にします。

以上がCSS を使用してテキストを水平に揃えたまま要素の背景を傾けるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。